Table Of Content
CSS Display Tutorial
View more Tutorials:
-
1- Overview of CSS display
-
CSS display is used in the following situations:
-
1 - CSS {display: none}
-
CSS {display:none} is used to hide an element and release the space that it occupies.
-
2 - CSS {display: block | inline | inline-block}
-
Use CSS display with one of the block, inline, inline-block values to make the element treated as a Block element, inline element, or inline-block element.
-
3 - CSS {display: grid | flex | ... }
-
Use CSS display with other values ( grid, inline-grid, flex, ...) to set the layout for the children of the current element. For example, CSS {display: grid | inline-grid} dividing the surface of the current element into a grid, consisting of many rows and columns, its children will be arranged on these grid cells.
-
-
2- CSS {display: none}
-
CSS {display:none} is used to hide an element and release the space that it occupies. To redisplay this element, use CSS {display:block | inline | inline-block} or remove CSS display.
-
-
display-none-example.html
<!DOCTYPE html> <html> <head> <title>CSS {display:none}</title> <meta charset="UTF-8"/> <script> function showHideImage(event) { var myImage = document.getElementById("myImage"); var displayValue = myImage.style.display; if(!displayValue) { myImage.style.display = "none"; } else { // Remove CSS display. myImage.style.display = null; // OR Set to: block|inline|inline-block. } } </script> </head> <body> <h2>CSS {display:none}</h2> <button onClick="showHideImage(event)">Show/Hide Image</button> <div style="padding:5px; margin-top:10px; background:#eee;"> <img src="../images/flower.png" id= "myImage"/> Apollo 11 was the spaceflight that landed the first humans, Americans Neil Armstrong and Buzz Aldrin, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC. </div> </body> </html>
-
CSS {visibility:hidden} makes an element become invisible, but it doesn't release the space that the element occupies.
-
3- CSS {display:block}
-
Use CSS {display:block} for an element to make it treated as a Block-level element.
-
- Some default elements are a block element, for example <div>, <hr>, ...
- Some other elements are by default Inline elements, for example <span>, your can use CSS {display:block} for them to turn it into a block element.
-
A block element is always displayed as a rectangle. The browser automatically adds line breaks before and after of this element.
-
-
Example: Apply CSS {display:block} to the < span> element to turn it into a block element:
-
-
display-block-example.html
<!DOCTYPE html> <html> <head> <title>CSS {display:block}</title> <meta charset="UTF-8"/> <script> function setDisplayBlock() { var mySpan = document.getElementById("mySpan"); mySpan.style.display = "block"; } // Use default display. function removeDisplay() { var mySpan = document.getElementById("mySpan"); mySpan.style.display = null; } </script> </head> <body> <h2>CSS {display:block}</h2> <button onClick="setDisplayBlock()">Set {display:block}</button> <button onClick="removeDisplay()">Remove display property</button> <div style="padding:5px; margin-top:10px; background:#eee;"> <img src="../images/flower.png" id= "myImage"/> <span id="mySpan" style="background:yellow">Apollo 11</span> was the spaceflight that landed the first humans, Americans Neil Armstrong and Buzz Aldrin, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC. </div> </body> </html>
-
4- CSS {display: inline}
-
Use CSS {display:inline} for an element to make it treated as a Inline element.
-
- Some elements are by default inline elements, for example, <span>, <strong>, ...
- Some other elements are by default block elements, for example, <div>, for which you can use CSS {display:inline} to turn them into inline elements.
-
An inline element, in many cases, are not a rectangle. It may lie on multiple lines.
-
Apollo 11 was the spaceflight that landed the first humans, Americans Neil Armstrong and Buzz Aldrin, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong <span style="background:yellow;"> became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC. </span>
-
-
Example, apply CSS {display:inline} to a <div> element to turn it into an inline element.
-
display-inline-example.html
<!DOCTYPE html> <html> <head> <title>CSS {display:inline}</title> <meta charset="UTF-8"/> <script> function setDisplayInline() { var myDiv = document.getElementById("myDiv"); myDiv.style.display = "inline"; } // Use default display. function removeDisplay() { var myDiv = document.getElementById("myDiv"); myDiv.style.display = null; } </script> </head> <body> <h2>CSS {display:inline}</h2> <button onClick="setDisplayInline()">Set {display:inline}</button> <button onClick="removeDisplay()">Remove display property</button> <div style="padding:5px; margin-top:10px; background:#eee;"> <img src="../images/flower.png" /> <div id="myDiv" style="background:yellow"> Apollo 11 was the spaceflight that landed the first humans, Americans Neil Armstrong and Buzz Aldrin, on the Moon on July 20, 1969, at 20:18 UTC. </div> Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC. </div> </body> </html>
-
-
5- CSS {display: inline-block}
-
Use CSS {display:inline-block} for element to make it treated as an Inline-block element.
-
"Inline-block element" is a rectangle. The browser will not automatically add line breaks before and after this element, which makes inline-block elements possible on the same line.
-
-
display-inline-block-example.html
<!DOCTYPE html> <html> <head> <title>CSS {display:inline-block}</title> <meta charset="UTF-8"/> <style> div { background: yellow; padding: 5px; margin: 5px; } </style> </head> <body> <h2>CSS {display:inline-block}</h2> <div style="display:inline-block"> HTML Tutorial </div> <div style="display:inline-block"> CSS Tutorial </div> <div style="display:inline-block"> Javascript Tutorial </div> <div style="display:inline-block"> Bootstrap Tutorial </div> <div style="display:inline-block"> JQuery Tutorial </div> </body> </html>
-
-
6- CSS {display: grid | inline-grid}
-
CSS {display:grid | inline-grid} is applied to an element to divide its surface into a grid, consisting of rows and columns. Its child elements will be arranged on grid cells. It makes it easier to design pages instead of using CSS float or element positioning techniques.
-
-
7- CSS {display: flex}
-
- TODO Link!