span.icon {\n display: inline-block; \/* Characteristics of block, but lays out inline *\/\n}<\/code><\/pre>\n\n\n\nThe default value for all elements is inline. Most “User-Agent Stylesheets” (the default styles the browser applies to all sites) reset many elements to “block.” Let’s go through each of these, and then cover some of the other less common values.<\/p>\n\n\n
Syntax<\/h3>\n\n\ndisplay: [ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy><\/code><\/pre>\n\n\n\n- Initial value:<\/strong>
inline<\/code><\/li>- Applies to:<\/strong> all elements<\/li>
- Inherited:<\/strong> no<\/li>
- Computed value:<\/strong> a pair of keywords representing the inner<\/a> and outer<\/a> display types plus optional list-item<\/a> flag, or a
<display-internal><\/code><\/a> or <display-box><\/code><\/a> keyword; see prose in a variety of specs for computation rules<\/li>- Animation:<\/strong> n\/a<\/li><\/ul>\n\n\n
Values<\/h3>\n\n\n
The display<\/code> property accepts keyword values. Those keywords can be grouped into different categories.<\/p>\n\n\n\n\/* <display-outer> (its natural flow). *\/\ndisplay: block;\ndisplay: inline;\n\n\/* <display-inner> (its contents) *\/\ndisplay: flex;\ndisplay: flow-root;\ndisplay: grid;\ndisplay: table;\ndisplay: ruby; \/* experimental *\/\n\n\/* <display-listitem> (generates a content box and an inline list-item box) *\/\ndisplay: list-tem;\ndisplay: inline list-tem;\n\n\/* <display-internal> (defines table and ruby layouts) *\/\ndisplay: table-row-group;\ndisplay: table-header-group;\ndisplay: table-footer-group;\ndisplay: table-row;\ndisplay: table-cell;\ndisplay: table-column-group;\ndisplay: table-column;\ndisplay: table-caption;\ndisplay: ruby-base; \/* experimental *\/\ndisplay: ruby-text; \/* experimental *\/\ndisplay: ruby-base-container; \/* experimental *\/\ndisplay: ruby-text-container; \/* experimental *\/\n\n\/* <display-box> (determines whether to display a box or not) *\/\ndisplay: contents;\ndisplay: none;\n\n\/* <display-legacy> (CSS2 single-keyword syntax) *\/\ndisplay: inline-block;\ndisplay: inline-flex;\ndisplay: inline-grid;\ndisplay: inline-table;\n\n\/* Two-value examples *\/\ndisplay: block flow;\ndisplay: inline flow;\ndisplay: inline flow-root;\ndisplay: block flex;\ndisplay: inline flex;\ndisplay: block grid;\ndisplay: inline grid;\ndisplay: block flow-root;\n\n\/* Global values *\/\ndisplay: inherit;\ndisplay: initial;\ndisplay: revert;\ndisplay: unset;<\/code><\/pre>\n\n\nExamples<\/h3>\n\ndisplay: inline<\/code><\/h4>\n\n\nThe default value for elements. Think of elements like\u00a0<span><\/code>,\u00a0<em><\/code>, or\u00a0<b><\/code>\u00a0and how wrapping text in those elements within a string of text doesn’t break the flow of the text.<\/p>\n\n\n\n![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/inline-element.png?resize=346%2C108\" "\\"inline-element\\"")
<\/figure>\n\n\n\nThe\u00a0<em><\/code>\u00a0element has a 1px red border. Notice it sits right\u00a0inline\u00a0with the rest of the text.<\/p>\n\n\n\nAn inline element will accept margin and padding, but the element still sits inline as you might expect. Margin and padding will only push other elements horizontally away, not vertically.<\/p>\n\n\n\n![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/inlinepadding.png?resize=519%2C148\" "\\"inlinepadding\\"")
<\/figure>\n\n\n\nAn inline element will not accept height<\/code><\/a> and width<\/code><\/a>. It will just ignore it.<\/p>\n\n\ndisplay: inline-block<\/code><\/h4>\n\n\nAn element set to inline-block<\/code> is very similar to inline in that it will set inline with the natural flow of text (on the “baseline”). The difference is that you are able to set a width<\/code> and height<\/code> which will be respected.<\/p>\n\n\n\n![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/inline-block.png?resize=526%2C207&ssl=1\" "\\"inline-block\\"")
<\/figure>\n\n\n\n\n\ndisplay: block<\/code><\/h4>\n\n\nA number of elements are set to block<\/code> by the browser UA stylesheet. They are usually container elements, like <div><\/code>, <section><\/code>, and <ul><\/code>. Also text \u201cblocks\u201d like <p><\/code> and <h1><\/code>. Block level elements do not sit inline but break past them. By default (without setting a width) they take up as much horizontal space as they can.<\/p>\n\n\n\n![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/block.png?resize=520%2C239&ssl=1\")
The two elements with the red borders are <p><\/code>s which are block level elements. The <em><\/code> element in between them doesn\u2019t sit inline because the blocks break down below inline elements.<\/figcaption><\/figure>\n\n\n\n \t\t\n \n \n\n