This is week 3 in Phase 0, and this week we have been introduced to CSS concepts. For me, this has been a very difficult endeavor, and I spent many hours struggling with translating my design vision for my site into a minimum viable product via CSS. To wrap up the week, here's a short discussion about inline vs inline block elements.
What does it mean to display inline vs using inline block?
A block element occupies the entire space of its parent element, and browsers display blocks with newlines before and after them. They do not allow other elements to sit to their left or right within the parent block. By default, block elements begin on a newline. Block elements can have a set height and width.
Inline-block elements, by contrast, have no linebreaks before or after, and can sit next to other elements within its parent element. Inline-block elements are still blocks, however, and therefore can have a set height and width.
Inline elements, like inline-blocks, can sit next to other elements within its parent element, but unlike blocks, inline elements cannot take a set height or width.
So we can say that an inline-block element behaves as an inline element, but retains its block qualities by having a set width and height. Inline elements can float; inline-block elements float by default, and are considered to float in a better way than having it be explicitly defined, because the old method of defining a float meant the float had to be cleared for elements that came after the floating element.
Resources
- Stack Overflow "CSS display: inline vs inline block"
- Mozilla Developer Network: block-level elements and inline elements
- Learn CSS Layout: inline-block