Analyze. Act. Achieve.
Kurinchilion KURINCHILION Analyze. Act. Achieve.

News

CSS: Difference between Block, Inline elements

CSS "display" Element takes in the following styles

display: none display: block display: inline

Brief explanation:

* display: none To make the tags not visibile you use this setting. Some elements like "meta", "style" when present in the html content has this setting by default.

* display: block When elements are set to display "block", then they take up the entire width available having NEW line above and below them.

div, p, h1...h6, table, form, pre, blockquote, ul, li, ol, dl, dd, dt, dd, table have this setting by origin. ("...by origin" - when no explicit settings are applied to them)

* display: inline Unlike "block" elements, "inline" elements just takes up the space that they need for display. They go inline with the context or the flow of the document.

span, a, img, strong, em, b, br, input have this setting by origin.