CSS Layouts — The display property
One of the fundamental building blocks of CSS, the display property. Responsible for how or if an element is shown. Every element in HTML has a default display value, typically block or inline.
Block-level Elements
These elements will always start on a new line and take up the full available width, by default. These include:
- <div>
- <h1> and the rest
- <p>
- <header>
- <footer>
- <section>
Inline Elements
These elements will start wherever the previous element ends which may or may not be a new line, and will only take up the space required. These include:
- <span>
- <a>
- <img>
display: none
None is a special case and will remove or display elements without the need to delete or re-create them. This is typically used with animation or some kind of dynamic element outside of a framework which can handle conditional UI for you. In this case, the element will no longer affect the rest of the DOM, it is essentially gone. If you’d rather just hide an element but have its effect in space remain — see visibility: hidden.
Inline-Block??
The key here is that display: inline-block, unlike purely inline elements, will allow you to set a width and height on the element. The top and bottom margins and padding will also be respected, unlike with display: inline. In contrast, display: inline-block, will not add a line break and allow elements to begin where it ends, just like an inline element. So, not that confusing. It’s pretty much what it sounds like, a combination of inline and block.
Of course, there are other values on the display property but these two are the fundamental pair. For information on the other properties, there are numerous blogs and articles out there with all the detail you could wish for. I may even have one written by the time anyone sees this.
