{"id":24790,"date":"2022-11-21T11:37:05","date_gmt":"2022-11-21T19:37:05","guid":{"rendered":"https:\/\/coderpad.io\/?p=24790"},"modified":"2023-06-05T13:49:56","modified_gmt":"2023-06-05T20:49:56","slug":"demystifying-the-css-display-property","status":"publish","type":"post","link":"https:\/\/coderpad.io\/blog\/development\/demystifying-the-css-display-property\/","title":{"rendered":"Demystifying The CSS Display Property"},"content":{"rendered":"\n<p>The web page treats and sees every element as a box(to be precise, a rectangular box). There are two basic forms of boxes on a web page, and these are <code>block<\/code> and <code>inline<\/code>. The <code>display<\/code> property is a significant CSS property that you can use to determine how elements are displayed in your browser.<\/p>\n\n\n\n<p>When you load a webpage in your browser, you will notice that the HTML elements on the page have their default ways of displaying. Some elements stack up on different lines, while others follow each other on one line. For example, all paragraph elements (<code>&lt;p&gt;<\/code>) stack up following each other on different lines, while the <code>&lt;a&gt;<\/code> elements, images, and others line up on a single line.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/11\/img_637bd3619dad6.png\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Block-level vs. inline elements &#8211; Image by <a href=\"https:\/\/edu.gcfglobal.org\/en\/basic-html\/blocklevel-inline-and-organizational-elements\/1\/\" target=\"_blank\" rel=\"noopener\">gcfglobal<\/a><\/figcaption><\/figure>\n\n\n\n<p>In this article, you will learn what the display property means, how it works, and the major values that affect how elements appear on the web page.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is the CSS display property?<\/h2>\n\n\n\n<p>The CSS display property sets how HTML elements display on your browser and the layout flow. The display property has about seven major values, which all affect how elements are displayed. Two major values you may be conversant with are <a href=\"https:\/\/coderpad.io\/blog\/development\/a-guide-to-css-flexbox\/\"><code>flex<\/code><\/a> and <a href=\"https:\/\/coderpad.io\/blog\/development\/a-very-very-in-depth-guide-on-css-grid\/\"><code>grid<\/code><\/a> which you can use to organize the layout of elements on your web page.<\/p>\n\n\n\n<p>This article focuses on the flow of elements, and to perfectly understand, here are the display values that will be explained and used. These values include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>block<\/code><\/li>\n\n\n\n<li><code>inline<\/code><\/li>\n\n\n\n<li><code>inline-block<\/code><\/li>\n\n\n\n<li><code>inline-flex<\/code><\/li>\n\n\n\n<li><code>inline-grid<\/code><\/li>\n\n\n\n<li><code>none<\/code><\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\">\/\/ <span class=\"hljs-selector-tag\">Syntax<\/span>\n<span class=\"hljs-selector-class\">.selector<\/span> {\n    <span class=\"hljs-attribute\">display<\/span>: inline-block;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\">CSS block display<\/h2>\n\n\n\n<p>You must have noticed that when you use a heading, paragraph tag, table tag, or semantic tags, they take the full width of space, and each element starts with a new line. This is because they are block-level elements.&nbsp;<\/p>\n\n\n\n<p>Block-level elements will <strong>always start on a new line<\/strong>, irrespective of where you use the element. It will also <strong>always cover the entire width of the parent container<\/strong>, which stretches out to the left and right of its parent container.<\/p>\n\n\n\n<p>To explain this, suppose your HTML looks like this where you have a heading, paragraph tags, and also tags like bold, italics, span, and others within the paragraph tag:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>All Heading elements are block elements<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span>&gt;<\/span>This means this will always be on a new line<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3<\/span>&gt;<\/span>And will take up the entire container width<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h3<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n            Paragraphs are block elements, while elements like the <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">em<\/span>&gt;<\/span>em<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">em<\/span>&gt;<\/span>,\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">i<\/span>&gt;<\/span>italics<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span>, <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>strong<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span> <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">em<\/span>&gt;<\/span>However<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">em<\/span>&gt;<\/span>, em and and\n            lots more are <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">small<\/span>&gt;<\/span>inline<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">small<\/span>&gt;<\/span> elements.\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n            Block elements define the flow of the HTML document.\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span>&gt;<\/span>While inline elements do not.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>To illustrate the block elements, I will add <code>background-color<\/code>, so you notice how they fill up the entire width and move to new lines.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/11\/img_637bd36446a4a.png\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Illustration of all HTML elements in their default display.<\/figcaption><\/figure>\n\n\n\n<p>Normally, you might expect that since there is still more space after the first paragraph, the next paragraph should start from where it stopped, but it doesn&#8217;t work that way because it is a block-level element.<\/p>\n\n\n\n<p>When you&#8217;re working with inline elements and want them to possess the qualities or act like block elements, you set the element&#8217;s <code>display<\/code> value to <code>block<\/code>. For example, you can set the <code>span<\/code> element\u2019s <code>display<\/code> property to <code>block<\/code> so that it is no longer <code>inline<\/code> but now <code>block<\/code>.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">span<\/span> {\n    <span class=\"hljs-attribute\">display<\/span>: block;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Then your page will look like this.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/11\/img_637bd3656034a.png\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Image shows the span element converted from inline to block element.<\/figcaption><\/figure>\n\n\n\n<p>Notice that the last paragraph takes up two lines because span now acts like a block element. Below are examples of <a href=\"https:\/\/www.w3schools.com\/html\/html_blocks.asp\" target=\"_blank\" rel=\"noopener\">block elements<\/a> for reference purposes:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/11\/img_637bd3684bddf.png\" alt=\"\"\/><figcaption class=\"wp-element-caption\">A list of block elements.<\/figcaption><\/figure>\n\n\n\n<p>It is important to know that you can specify block elements <code>width<\/code> and <code>height<\/code>. You can also work with <code>padding<\/code> and <code>margin<\/code> efficiently, but it\u2019s not so with inline elements. Let\u2019s now explore inline elements.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS inline display<\/h2>\n\n\n\n<p>The CSS inline display value is used to set a block element as an inline element. Inline elements are the opposite of block elements because they do not start on a new line and only take up as much width as their content.<\/p>\n\n\n\n<p>For example, if I add a <code>background-color<\/code> property to each inline element in the HTML example, you will notice that these inline elements stick within other elements. They\u2019re not for determining layout; they\u2019re only used within block elements for styling.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/11\/img_637bd368ef139.png\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Image highlighting all inline elements and showing how they fit within texts and their container.<\/figcaption><\/figure>\n\n\n\n<p>You can convert a block element to act like an inline element using the <code>display<\/code> property set to <code>inline<\/code>. For example, let\u2019s make the paragraph tags <code>inline<\/code> so that all the text comes together.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">p<\/span> {\n    <span class=\"hljs-attribute\">display<\/span>: inline;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/11\/img_637bd369b2ff7.png\" alt=\"\"\/><figcaption class=\"wp-element-caption\">The paragraph tag converted from inline to block element.<\/figcaption><\/figure>\n\n\n\n<p>You will notice that the background color for the paragraph goes around the text and no longer takes up the full width of the container.&nbsp;<\/p>\n\n\n\n<p>It\u2019s also important to know that inline elements do not accept <code>width<\/code> and <code>height<\/code>. They ignore it if you decide to use it. They accept <code>margin<\/code> and <code>padding<\/code>, but the element will still sit <code>inline<\/code> and only push other elements horizontally away, not vertically.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/11\/img_637bd36a61e52.png\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Applying padding and margin to inline elements.<\/figcaption><\/figure>\n\n\n\n<p>Below are examples of <a href=\"https:\/\/www.w3schools.com\/html\/html_blocks.asp\" target=\"_blank\" rel=\"noopener\">inline elements<\/a> for reference purposes:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/11\/img_637bd36b2c823.png\" alt=\"\"\/><figcaption class=\"wp-element-caption\">A list of inline HTML elements.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">CSS inline-block display<\/h2>\n\n\n\n<p>You now understand what the inline and block display values mean and how they work. One angle is still missing; you might want a particular element to be set <code>inline<\/code> with the natural flow of text but also move to a new line and work with properties like <code>height<\/code> and <code>width<\/code>. This is where <code>inline-block<\/code> is useful.<\/p>\n\n\n\n<p>The <code>inline-block<\/code> display value helps bridge the gap making it possible to have the major characteristics of the inline elements and the block element. This is not configured by default for any element. You get to apply this manually. For example, if you want to style the <code>&lt;a&gt;<\/code> tag, which sits in a paragraph to be a button.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n    Block elements define the flow of the HTML document.\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span>&gt;<\/span>While inline elements do not.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span> <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"\"<\/span>&gt;<\/span>Click Me<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>By default, the <code>&lt;a&gt;<\/code> tag is an inline element. Suppose you want to move it to a new line. You will notice it takes up the entire container width if you use <code>block<\/code>.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">a<\/span> {\n    <span class=\"hljs-attribute\">display<\/span>: block;\n    <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">10px<\/span>;\n    <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">10px<\/span> <span class=\"hljs-number\">20px<\/span>;\n    <span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-built_in\">rgb<\/span>(<span class=\"hljs-number\">50<\/span>, <span class=\"hljs-number\">163<\/span>, <span class=\"hljs-number\">255<\/span>);\n    <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">5px<\/span>;\n    <span class=\"hljs-attribute\">text-decoration<\/span>: none;\n    <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#fff<\/span>;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/11\/img_637bd36c0c148.png\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Link tag converted to a block element.<\/figcaption><\/figure>\n\n\n\n<p>To fix this, you can use <code>inline-block<\/code>, which will move the <code>&lt;a&gt;<\/code> element to a new line and not take up the entire width. Then you can also use properties like <code>height<\/code>, <code>width<\/code>, <code>padding<\/code>, and <code>margin<\/code>, which works properly compared to the <code>inline<\/code> element.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">a<\/span> {\n    <span class=\"hljs-attribute\">display<\/span>: inline-block;\n    <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">10px<\/span>;\n    <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">10px<\/span> <span class=\"hljs-number\">20px<\/span>;\n    <span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-built_in\">rgb<\/span>(<span class=\"hljs-number\">50<\/span>, <span class=\"hljs-number\">163<\/span>, <span class=\"hljs-number\">255<\/span>);\n    <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">5px<\/span>;\n    <span class=\"hljs-attribute\">text-decoration<\/span>: none;\n    <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#fff<\/span>;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/11\/img_637bd36c8b48a.png\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Using inline-block for link element so it posses features of both inline and block elements.<\/figcaption><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u2139\ufe0f You can apply the <code>inline-block<\/code> value to any element you wish when you want to move an element to a new line and avoid it from taking the entire width of your container. Also, when you want to be able to add <code>width<\/code> and <code>height<\/code> to inline elements.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">CSS inline flex and inline grid<\/h2>\n\n\n\n<p>When exploring the CSS <a href=\"https:\/\/coderpad.io\/blog\/development\/a-guide-to-css-flexbox\/\">flexbox<\/a> and <a href=\"https:\/\/coderpad.io\/blog\/development\/a-very-very-in-depth-guide-on-css-grid\/\">grid<\/a> layout properties, you will notice little or no emphasis made to the <code>inline-flex<\/code> and <code>inline-grid<\/code> options which work similarly to the <code>flex<\/code> and <code>grid<\/code> options but with little differences.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-class\">.box-container<\/span> {\n    <span class=\"hljs-attribute\">display<\/span>: inline-flex;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The <code>flex<\/code>, <code>grid<\/code>, <code>inline-flex<\/code>, or <code>inline-grid<\/code> values are usually applied to container elements. By default, these container elements like <code>div<\/code> are <code>block<\/code> elements. When you use either <code>flex<\/code> or <code>grid<\/code> as its <code>display<\/code> property, it functions like <em>block-flex<\/em> (it\u2019s called flex) or <em>block-grid<\/em> (it\u2019s called grid). However, there is nothing like <em>block-flex<\/em> or <em>block-grid<\/em>. But this means that the container works like a block container, but you now apply flex functionalities.<\/p>\n\n\n\n<p>This means the container will take up full width, start from a new line, and all block features will work with the container element where the display value is added.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/11\/img_637bd36d263ce.png\" alt=\"\"\/><figcaption class=\"wp-element-caption\">The difference between flex and inline-flex.<\/figcaption><\/figure>\n\n\n\n<p>This is also similar to CSS grid. It is important to know that the <code>inline-flex<\/code>, <code>flex<\/code>, <code>grid<\/code>, and <code>inline-grid<\/code> is added to the container, and the <code>inline<\/code> or <code>block<\/code> display flow will only affect the container and not the container items.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS display none<\/h2>\n\n\n\n<p>So far, you have learned very important display values. One last value to be explained is the <code>none<\/code> value. This value hides HTML elements from displaying on your web page. For example, you can use this <code>display<\/code> value if you have a portion of your web page or an element you wish to hide from appearing on the screen.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">div<\/span> {\n    <span class=\"hljs-attribute\">display<\/span>: none;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/11\/img_637bd36fb6a1d.gif\" alt=\"\"\/><figcaption class=\"wp-element-caption\">An illustration of how to hide an element from the screen with <code>display: none<\/code>.<\/figcaption><\/figure>\n\n\n\n<p>You might be conversant with the CSS <code>visibility<\/code> property which does a similar task to help hide HTML elements from displaying on the screen, but they both have some differences.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">CSS display none vs. visibility hidden<\/h3>\n\n\n\n<p>A very plain explanation is that when you use <code>visibility<\/code> with <code>hidden<\/code> as its value, it hides the HTML elements. However, the gap occupied by the hidden element will remain and affect the page. While the <code>display<\/code> property set to <code>none<\/code> will remove the element and its effects from the web page, the elements and tags will remain visible in the source code.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/11\/img_637bd373c0dd5.gif\" alt=\"\"\/><figcaption class=\"wp-element-caption\">An illustration showing the difference between visibility of hidden and display set to none.<\/figcaption><\/figure>\n\n\n\n<p>If you are building responsive web pages, you can use the <code>none<\/code> value of the <code>display<\/code> property to hide specific sections and display when on larger devices or when maybe a button is clicked, like the navigation menu.<\/p>\n\n\n<div\n\tclass=\"sandbox-embed responsive-embed  sandbox-embed--full-width\"\n\tstyle=\"padding-top: 125%\"\ndata-block-name=\"coderpad-sandbox-embed\">\n\t<iframe src=\"https:\/\/embed.coderpad.io\/sandbox?question_id=235619&#038;use_question_button\" width=\"640\" height=\"800\" loading=\"lazy\" aria-label=\"Try out the CoderPad sandbox\"><\/iframe>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">That\u2019s it \ud83c\udf89<\/h2>\n\n\n\n<p>In this article, you have learned what the CSS display property means and how it can help you set how HTML elements are displayed on your browser. You also learned the various values and how they work.&nbsp;<\/p>\n\n\n\n<p>This is essential to make you aware of some behavior certain elements exhibit when working with them, so you don\u2019t think an element filling up the entire width of your container is a bug when you want it to only take up the width of its content.<\/p>\n\n\n\n<p>Thanks for reading, and have fun coding!<\/p>\n\n\n\n<p><em>I\u2019m Joel Olawanle, a frontend developer and technical writer interested in making the web accessible to everyone by always looking for ways to give back to the tech community. Follow me and connect with me on <\/em><a href=\"https:\/\/twitter.com\/olawanle_joel\" target=\"_blank\" rel=\"noopener\"><em>Twitter<\/em><\/a><em>.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The web page treats and sees every element as a box(to be precise, a rectangular box). The display property is a significant CSS property that you can use to determine how elements are displayed in your browser. This article will teach you how to improve your web page&#8217;s display using the CSS display property.<\/p>\n","protected":false},"author":1,"featured_media":24948,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[],"persona":[29],"blog-programming-language":[62],"keyword-cluster":[],"class_list":["post-24790","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development"],"acf":[],"_links":{"self":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/24790","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/comments?post=24790"}],"version-history":[{"count":27,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/24790\/revisions"}],"predecessor-version":[{"id":32617,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/24790\/revisions\/32617"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media\/24948"}],"wp:attachment":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media?parent=24790"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/categories?post=24790"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/tags?post=24790"},{"taxonomy":"persona","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/persona?post=24790"},{"taxonomy":"blog-programming-language","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/blog-programming-language?post=24790"},{"taxonomy":"keyword-cluster","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/keyword-cluster?post=24790"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}