CSS Display Property
The CSS Display property has four different values and we are going to examine them one by one.
Here, you can see the box around <img> element just takes up as much space as the size of the image. Also, <a> element has box around text of the link. But, the other element called <h1> has the box until the end of the display.
Why is that?
Well, that's because by default some of the elements are having it's display property set to block.
block: If the display property of an element is set to block then it takes up the whole width of the screen blocking out any other elements from sitting next to it on the left or right.
Common Block elements include:
- Forms (<form>)
- Divisions (<div>)
- Paragraphs (<p>)
- Headers (<h1>,<h2>,...,<h6>)
The code snippet and sample html page below illustrates the "block" display property.
inline: Elements which have it's property set to inline only take up as much space as it need in both height and width. That means, you can place as many inline elements, until the space runs out horizontally.
Common Inline elements include:
- Images (<img>)
- Anchors (<a>)
- Spans (<span>)
Now, the question is why would one ever use block elements, knowing it will take up more screen space, if we can simply use inline elements?
The simple answer to the question is because you can't change width of the inline element.
The code snippet and sample html page below illustrates the "inline" display property.
inline-block: Elements whose display property is set to inline-block have more flexibility. You can change width of those elements. Also, it allows to place other elements in the same line as inline elements. Basically, it gives the best of both block and inline.
The code snippet and sample html page below illustrates the "inline-block" display property.
none: It simply removes the element from the website as if it didn't exist. Here in the below figure, we can see the span element is not displayed because it's display property is set to none. This property is particularly useful when you have a quiz on your website whose answer is initially set to display:none and when the user answers the quiz only then it is displayed.
