{"id":13152,"date":"2016-06-15T16:15:49","date_gmt":"2016-06-15T13:15:49","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=13152"},"modified":"2018-01-08T14:12:55","modified_gmt":"2018-01-08T12:12:55","slug":"css-display-property-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/css\/css-display-property-example\/","title":{"rendered":"CSS Display Property Example"},"content":{"rendered":"<p>In this article we will show, what is and how to use the <code>display<\/code> property from CSS.<\/p>\n<p>The css specification is maintained by the word wide web consortium (W3C). Here we will introduce the values \u00a0for display property defined in w3c specification.<\/p>\n<h2>1. Introduction<\/h2>\n<p>The display property lets you define how a certain html element should be displayed.<\/p>\n<p>Each layout element has a default value to <code>display<\/code> property. The default value for most of elements is blocked or inlined.<br \/>\n&nbsp;<br \/>\n[ulp id=&#8217;nAkUl5IbAjqlXSla&#8217;]<br \/>\n&nbsp;<br \/>\nFor almost all examples introduced\u00a0in this article, we will use the css class above to distinct one element from\u00a0the\u00a0other:<\/p>\n<p><span style=\"text-decoration: underline;\"><em>main.css<\/em><\/span><\/p>\n<pre class=\"brush:bash\">.a{\r\nborder: 3px solid #3fa4e2;\r\nwidth: 200px;\r\nheight: 30px;\r\nmargin: 10px;\r\n}\r\n\r\n.b{\r\nborder:3px solid #d0d62f;\r\nwidth:200px;\r\nheight: 30px;\r\nmargin: 10px;\r\n}\r\n\r\n.c{\r\nborder:3px solid #40b76e;\r\nwidth:200px;\r\nheight: 30px;\r\nmargin: 10px;\r\n}\r\n\r\n.d{\r\nborder:3px solid #db5c1c;\r\n}\r\n<\/pre>\n<h2>2. Values to property Display<\/h2>\n<p>There are many values to <code>display<\/code> property. Bellow\u00a0we will explain each one, with simple examples.<\/p>\n<h3>2.1. Commons display values<\/h3>\n<p>The tree most familiar display values are : block, inline and inline-block.<\/p>\n<ul>\n<li><code>block<\/code> :\u00a0Causes an element to generate a block box.<\/li>\n<\/ul>\n<p><span style=\"text-decoration: underline;\"><em>display-block.css<\/em><\/span><\/p>\n<pre class=\"brush:xml\"> &lt;div class=\"a\" style=\"display:block \"&gt; div a&lt;\/div&gt;\r\n &lt;div class=\"b\" style=\"display:block\" &gt; div b&lt;\/div&gt;\r\n &lt;div class=\"c\" style=\"display:block\" &gt; div c&lt;\/div&gt;\r\n &lt;div class=\"d\" style=\"display:block \"&gt; div d&lt;\/div&gt;\r\n<\/pre>\n<figure id=\"attachment_13263\" aria-describedby=\"caption-attachment-13263\" style=\"width: 860px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/06\/display-block-wm.png\"><img decoding=\"async\" class=\"wp-image-13263 size-full\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/06\/display-block-wm.png\" alt=\"display-block-wm\" width=\"860\" height=\"219\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/06\/display-block-wm.png 860w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/06\/display-block-wm-300x76.png 300w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/06\/display-block-wm-768x196.png 768w\" sizes=\"(max-width: 860px) 100vw, 860px\" \/><\/a><figcaption id=\"caption-attachment-13263\" class=\"wp-caption-text\">Image 1 &#8211; Using block value for display property<\/figcaption><\/figure>\n<ul>\n<li><code>inline<\/code>:\u00a0Causes an element to generate one or more inline boxes.<\/li>\n<\/ul>\n<p><span style=\"text-decoration: underline;\"><em>display-inline.css<\/em><\/span><\/p>\n<pre class=\"brush:xml\"> &lt;div class=\"a\" style=\"display:inline;\" &gt; div a&lt;\/div&gt;\r\n &lt;div class=\"b\" style=\"display:inline\" &gt; div b&lt;\/div&gt;\r\n &lt;div class=\"c\" style=\"display:inline\" &gt; div c&lt;\/div&gt;\r\n<\/pre>\n<figure id=\"attachment_13264\" aria-describedby=\"caption-attachment-13264\" style=\"width: 860px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/06\/display-inline-wm.png\"><img decoding=\"async\" class=\"wp-image-13264 size-full\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/06\/display-inline-wm.png\" alt=\"display-inline-wm\" width=\"860\" height=\"104\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/06\/display-inline-wm.png 860w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/06\/display-inline-wm-300x36.png 300w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/06\/display-inline-wm-768x93.png 768w\" sizes=\"(max-width: 860px) 100vw, 860px\" \/><\/a><figcaption id=\"caption-attachment-13264\" class=\"wp-caption-text\">Image 2 &#8211; Using inline value for display property<\/figcaption><\/figure>\n<p>You can see\u00a0that inline value\u00a0respects left &amp; right margins and padding, but <strong>not<\/strong> top &amp; bottom and\u00a0<strong>cannot<\/strong> has a width and height set<\/p>\n<ul>\n<li><code>inline-block<\/code>:\u00a0<span style=\"line-height: 1.5;\">Causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.<\/span><\/li>\n<\/ul>\n<p><span style=\"text-decoration: underline;\"><em>display-inline-block.css<\/em><\/span><\/p>\n<pre class=\"brush:xml\"> &lt;div class=\"a\" style=\"display:inline-block\" &gt; div a&lt;\/div&gt;\r\n &lt;div class=\"b\" style=\"display:inline-block\" &gt; div b&lt;\/div&gt;\r\n &lt;div class=\"c\" style=\"display:inline-block\" &gt; div c&lt;\/div&gt;\r\n<\/pre>\n<figure id=\"attachment_13265\" aria-describedby=\"caption-attachment-13265\" style=\"width: 1500px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/06\/inline-block-wm.png\"><img decoding=\"async\" class=\"wp-image-13265 size-full\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/06\/inline-block-wm.png\" alt=\"inline-block-wm\" width=\"1500\" height=\"210\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/06\/inline-block-wm.png 1500w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/06\/inline-block-wm-300x42.png 300w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/06\/inline-block-wm-768x108.png 768w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/06\/inline-block-wm-1024x143.png 1024w\" sizes=\"(max-width: 1500px) 100vw, 1500px\" \/><\/a><figcaption id=\"caption-attachment-13265\" class=\"wp-caption-text\">Image 3 &#8211; Using inline-block value for display property<\/figcaption><\/figure>\n<h3>2.2. Lists and Inherit<\/h3>\n<p>Unlike\u00a0of <code>inline<\/code> property, <code>inline-block<\/code> property \u00a0respects top &amp; bottom margins, padding and respects height and width.<\/p>\n<ul>\n<li><code>list-item:\u00a0<\/code>Causes an element to generate a principal block box and a marker box.<\/li>\n<\/ul>\n<p><span style=\"text-decoration: underline;\"><em>display-list-item.css<\/em><\/span><\/p>\n<pre class=\"brush:xml\"> \r\n &lt;div class=\"a\" style=\"display:list-item\" &gt; div a&lt;\/div&gt;\r\n &lt;div class=\"b\" style=\"display:list-item\" &gt; div b&lt;\/div&gt;\r\n &lt;div class=\"c\" style=\"display:list-item\" &gt; div c&lt;\/div&gt;\r\n<\/pre>\n<figure id=\"attachment_13266\" aria-describedby=\"caption-attachment-13266\" style=\"width: 620px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/06\/display-list-item-wm.png\"><img decoding=\"async\" class=\"wp-image-13266 size-large\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/06\/display-list-item-wm-1024x215.png\" alt=\"display-list-item-wm\" width=\"620\" height=\"130\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/06\/display-list-item-wm-1024x215.png 1024w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/06\/display-list-item-wm-300x63.png 300w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/06\/display-list-item-wm-768x161.png 768w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/06\/display-list-item-wm.png 1500w\" sizes=\"(max-width: 620px) 100vw, 620px\" \/><\/a><figcaption id=\"caption-attachment-13266\" class=\"wp-caption-text\">Image 4 &#8211; Using list-item value for display property<\/figcaption><\/figure>\n<ul>\n<li><code>none<\/code><br \/>\nThis value causes an element to not appear in the document. It has no effect on layout.<\/li>\n<\/ul>\n<ul>\n<li><code>inherit<\/code><br \/>\nTakes the same specified value as the property for the element&#8217;s parent.<\/li>\n<\/ul>\n<p><span style=\"text-decoration: underline;\"><em>display-inherit.css<\/em><\/span><\/p>\n<pre class=\"brush:xml\">&lt;div class=\"d\" style=\"display:block\" &gt; div d\r\n      &lt;div class=\"a\" style=\"display:inherit\" &gt; div a&lt;\/div&gt;\r\n &lt;\/div&gt;\r\n \r\n \r\n &lt;div class=\"d\" style=\"display:inline\" &gt; div d\r\n     &lt;div class=\"a\" style=\"display:inherit\" &gt; div a&lt;\/div&gt;\r\n &lt;\/div&gt;<\/pre>\n<figure id=\"attachment_13267\" aria-describedby=\"caption-attachment-13267\" style=\"width: 620px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/06\/display-inherit-wm.png\"><img decoding=\"async\" class=\"wp-image-13267 size-large\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/06\/display-inherit-wm-1024x216.png\" alt=\"display-inherit-wm\" width=\"620\" height=\"131\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/06\/display-inherit-wm-1024x216.png 1024w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/06\/display-inherit-wm-300x63.png 300w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/06\/display-inherit-wm-768x162.png 768w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/06\/display-inherit-wm.png 1500w\" sizes=\"(max-width: 620px) 100vw, 620px\" \/><\/a><figcaption id=\"caption-attachment-13267\" class=\"wp-caption-text\">Image 5 &#8211; Using inherit value for display property<\/figcaption><\/figure>\n<p>For inherit property we have two examples . In first one, the parent element (div d) has display:block, than, \u00a0the child element that has display:inherit will behave\u00a0like display block. In second example, the parent element (div d) has display:inline, than, \u00a0the child element that has display:inherit will behave\u00a0like display\u00a0inline.<\/p>\n<h3>2.3. Table display values<\/h3>\n<p>The display property has many properties that permits you to build a table like html:<\/p>\n<ul>\n<li>table &#8211;\u00a0Behave like a &lt;table&gt; element<\/li>\n<li>inline-table &#8211;\u00a0Specifies that an element defines an inline-level table.<\/li>\n<li>table-row-group &#8211;\u00a0Behavse like a &lt;tbody&gt; element.<\/li>\n<li>table-header-group &#8211;\u00a0<span style=\"line-height: 1.5;\">Behaves like a &lt;thead&gt; element.<\/span><\/li>\n<li>table-footer-group &#8211;\u00a0<span style=\"line-height: 1.5;\">Behaves like a &lt;tfoot&gt; element.<\/span><\/li>\n<li>table-row &#8211;\u00a0<span style=\"line-height: 1.5;\">Behaves like a &lt;tr&gt; element.<\/span><\/li>\n<li>table-column-group &#8211;\u00a0<span style=\"line-height: 1.5;\">Behaves like a &lt;colgroup&gt; element.<\/span><\/li>\n<li>table-column &#8211;\u00a0<span style=\"line-height: 1.5;\">Behaves like a &lt;col&gt; element.<\/span><\/li>\n<li>table-cell &#8211;\u00a0<span style=\"line-height: 1.5;\">Behaves like a &lt;td&gt; element.<\/span><\/li>\n<li>table-caption &#8211;\u00a0<span style=\"line-height: 1.5;\">Behaves like a &lt;caption&gt; element.<\/span><\/li>\n<\/ul>\n<p>If you want to create a table in HTML we usually do this:<\/p>\n<p><span style=\"text-decoration: underline;\"><em>simple-table.html<\/em><\/span><\/p>\n<pre class=\"brush:xml\">&lt;table border=1&gt;\r\n &lt;thead&gt;\r\n &lt;tr&gt;\r\n &lt;th&gt;Day&lt;\/th&gt;\r\n &lt;th&gt;Sales&lt;\/th&gt;\r\n &lt;\/tr&gt;\r\n &lt;\/thead&gt;\r\n &lt;tfoot&gt;\r\n &lt;tr&gt;\r\n &lt;td&gt;Total&lt;\/td&gt;\r\n &lt;td&gt;175&lt;\/td&gt;\r\n &lt;\/tr&gt;\r\n &lt;\/tfoot&gt;\r\n &lt;tbody&gt;\r\n &lt;tr&gt;\r\n &lt;td&gt;Monday&lt;\/td&gt;\r\n &lt;td&gt;100&lt;\/td&gt;\r\n &lt;\/tr&gt;\r\n &lt;tr&gt;\r\n &lt;td&gt;Tuesday&lt;\/td&gt;\r\n &lt;td&gt;75&lt;\/td&gt;\r\n &lt;\/tr&gt;\r\n &lt;\/tbody&gt;\r\n &lt;\/table&gt;\r\n<\/pre>\n<p>The result is<\/p>\n<figure id=\"attachment_13274\" aria-describedby=\"caption-attachment-13274\" style=\"width: 300px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/06\/simple-table-wm.png\"><img decoding=\"async\" class=\"wp-image-13274 size-medium\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/06\/simple-table-wm-300x201.png\" alt=\"simple-table-wm\" width=\"300\" height=\"201\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/06\/simple-table-wm-300x201.png 300w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/06\/simple-table-wm.png 547w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><figcaption id=\"caption-attachment-13274\" class=\"wp-caption-text\">Image 6 &#8211; Simple html table.<\/figcaption><\/figure>\n<p>Instead, you can use the display property to build a css table :<\/p>\n<p><span style=\"text-decoration: underline;\"><em>table-example.css<\/em><\/span><\/p>\n<pre class=\"brush:xml\"> .table { display: table }\r\n .tr { display: table-row }\r\n .thead { display: table-header-group }\r\n .tbody { display: table-row-group }\r\n .tfoot { display: table-footer-group }\r\n .col { display: table-column }\r\n .colgroup { display: table-column-group }\r\n .td { display: table-cell }\r\n .th { display: table-cell }\r\n .caption { display: table-caption }\r\n<\/pre>\n<p>We need to create a border to better see the table, thus, I create a simple border class bellow<\/p>\n<p><span style=\"text-decoration: underline;\"><em>border-table.css<\/em><\/span><\/p>\n<pre class=\"brush:xml\">.border {\r\n border:1px solid black;\r\n padding:10px;\r\n }\r\n<\/pre>\n<p>The CSS\u00a0code that replaces\u00a0the HTML table could be:<\/p>\n<p><span style=\"text-decoration: underline;\"><em>table-with-display.html<\/em><\/span><\/p>\n<pre class=\"brush:xml\"> &lt;div class=\"table\" &gt;\r\n &lt;div class=\"thead\"&gt;\r\n &lt;div class=\"tr\"&gt;\r\n &lt;div class=\"td border\"&gt;Day&lt;\/div&gt;\r\n &lt;div class=\"td border\"&gt;Sales&lt;\/div&gt;\r\n &lt;\/div&gt;\r\n &lt;\/div&gt;\r\n &lt;div class=\"tfoot\"&gt;\r\n &lt;div class=\"tr\"&gt;\r\n &lt;div class=\"td border\"&gt;Total&lt;\/div&gt;\r\n &lt;div class=\"td border\"&gt;175&lt;\/div&gt;\r\n &lt;\/div&gt;\r\n &lt;\/div&gt;\r\n &lt;div class=\"tbody\"&gt;\r\n &lt;div class=\"tr\"&gt;\r\n &lt;div class=\"td border\"&gt;Monday&lt;\/div&gt;\r\n &lt;div class=\"td border \"&gt;100&lt;\/div&gt;\r\n &lt;\/div&gt;\r\n &lt;div class=\"tr \"&gt;\r\n &lt;div class=\"td border\"&gt;Tuesday&lt;\/div&gt;\r\n &lt;div class=\"td border\"&gt;75&lt;\/div&gt;\r\n &lt;\/div&gt;\r\n &lt;\/div&gt;\r\n &lt;\/div&gt;\r\n<\/pre>\n<p>And, the result :<\/p>\n<figure id=\"attachment_13275\" aria-describedby=\"caption-attachment-13275\" style=\"width: 300px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/06\/table-less-wm.png\"><img decoding=\"async\" class=\"wp-image-13275 size-medium\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/06\/table-less-wm-300x201.png\" alt=\"table-less-wm\" width=\"300\" height=\"201\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/06\/table-less-wm-300x201.png 300w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/06\/table-less-wm-768x513.png 768w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/06\/table-less-wm.png 772w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><figcaption id=\"caption-attachment-13275\" class=\"wp-caption-text\">Image 7 &#8211; Using tables values for display property<\/figcaption><\/figure>\n<h2>3. Conclusion<\/h2>\n<p>We have many values to property display. You can do so much with display property than show or hide html elements. You can identify html elements and create beautiful table-less layout. Now, you can use more this property in yours css.<\/p>\n<p>If you have any suggestion for this article, please tell-us.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this article we will show, what is and how to use the display property from CSS. The css specification is maintained by the word wide web consortium (W3C). Here we will introduce the values \u00a0for display property defined in w3c specification. 1. Introduction The display property lets you define how a certain html element &hellip;<\/p>\n","protected":false},"author":161,"featured_media":917,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-13152","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>CSS Display Property Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"In this article we will show, what is and how to use the display property from CSS. The css specification is maintained by the word wide web consortium\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/css\/css-display-property-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Display Property Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"In this article we will show, what is and how to use the display property from CSS. The css specification is maintained by the word wide web consortium\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/css\/css-display-property-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2016-06-15T13:15:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-01-08T12:12:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Poliana Reis\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@PolianaMR\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Poliana Reis\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-display-property-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-display-property-example\/\"},\"author\":{\"name\":\"Poliana Reis\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/fe34e23f34f7838751ab2edfd5e99db1\"},\"headline\":\"CSS Display Property Example\",\"datePublished\":\"2016-06-15T13:15:49+00:00\",\"dateModified\":\"2018-01-08T12:12:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-display-property-example\/\"},\"wordCount\":677,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-display-property-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/css-display-property-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-display-property-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/css\/css-display-property-example\/\",\"name\":\"CSS Display Property Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-display-property-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-display-property-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"datePublished\":\"2016-06-15T13:15:49+00:00\",\"dateModified\":\"2018-01-08T12:12:55+00:00\",\"description\":\"In this article we will show, what is and how to use the display property from CSS. The css specification is maintained by the word wide web consortium\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-display-property-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/css-display-property-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-display-property-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-display-property-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/css\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CSS Display Property Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/fe34e23f34f7838751ab2edfd5e99db1\",\"name\":\"Poliana Reis\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6b5f41db93d6f6684aa6179ec0744dc2a4606622dbe3acd40d8f445e5662798a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6b5f41db93d6f6684aa6179ec0744dc2a4606622dbe3acd40d8f445e5662798a?s=96&d=mm&r=g\",\"caption\":\"Poliana Reis\"},\"description\":\"Poliana graduated in Electric Engineering (E.E.) in 2006, when she started to work in the software development area. In 2012 she received the Masters of Computer Science. She is a multi-talent software developer with a leadership vein. Her greatest passion is the full stack of WEB development with major specialty in JEE platform.\",\"sameAs\":[\"https:\/\/www.webcodegeeks.com\/\",\"https:\/\/br.linkedin.com\/in\/poliana-reis-bbb60815\",\"https:\/\/x.com\/PolianaMR\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/poliana-reis\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Display Property Example - Web Code Geeks - 2026","description":"In this article we will show, what is and how to use the display property from CSS. The css specification is maintained by the word wide web consortium","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/css\/css-display-property-example\/","og_locale":"en_US","og_type":"article","og_title":"CSS Display Property Example - Web Code Geeks - 2026","og_description":"In this article we will show, what is and how to use the display property from CSS. The css specification is maintained by the word wide web consortium","og_url":"https:\/\/www.webcodegeeks.com\/css\/css-display-property-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2016-06-15T13:15:49+00:00","article_modified_time":"2018-01-08T12:12:55+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","type":"image\/jpeg"}],"author":"Poliana Reis","twitter_card":"summary_large_image","twitter_creator":"@PolianaMR","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Poliana Reis","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/css\/css-display-property-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-display-property-example\/"},"author":{"name":"Poliana Reis","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/fe34e23f34f7838751ab2edfd5e99db1"},"headline":"CSS Display Property Example","datePublished":"2016-06-15T13:15:49+00:00","dateModified":"2018-01-08T12:12:55+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-display-property-example\/"},"wordCount":677,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-display-property-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/css\/css-display-property-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/css\/css-display-property-example\/","url":"https:\/\/www.webcodegeeks.com\/css\/css-display-property-example\/","name":"CSS Display Property Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-display-property-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-display-property-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","datePublished":"2016-06-15T13:15:49+00:00","dateModified":"2018-01-08T12:12:55+00:00","description":"In this article we will show, what is and how to use the display property from CSS. The css specification is maintained by the word wide web consortium","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-display-property-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/css\/css-display-property-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/css\/css-display-property-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/css\/css-display-property-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/www.webcodegeeks.com\/category\/css\/"},{"@type":"ListItem","position":3,"name":"CSS Display Property Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/fe34e23f34f7838751ab2edfd5e99db1","name":"Poliana Reis","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6b5f41db93d6f6684aa6179ec0744dc2a4606622dbe3acd40d8f445e5662798a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6b5f41db93d6f6684aa6179ec0744dc2a4606622dbe3acd40d8f445e5662798a?s=96&d=mm&r=g","caption":"Poliana Reis"},"description":"Poliana graduated in Electric Engineering (E.E.) in 2006, when she started to work in the software development area. In 2012 she received the Masters of Computer Science. She is a multi-talent software developer with a leadership vein. Her greatest passion is the full stack of WEB development with major specialty in JEE platform.","sameAs":["https:\/\/www.webcodegeeks.com\/","https:\/\/br.linkedin.com\/in\/poliana-reis-bbb60815","https:\/\/x.com\/PolianaMR"],"url":"https:\/\/www.webcodegeeks.com\/author\/poliana-reis\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/13152","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/161"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=13152"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/13152\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/917"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=13152"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=13152"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=13152"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}