- Block elements can have a height and width.
- By default, line breaks are placed in the document flow between elements, assuming there are no other CSS properties in effect that disrupt the document flow, such as floats or non-static positioning.
border-collapseproperty only applies to tables, not block or inline elements. Thus, we get double borders between the elements.
- One solution is to use negative margins
Another solution I found on StackOverflow uses
box-shadowinstead of borders, but I think that's too tricky and I'll never remember it (although learning more about
box-shadowin general is a good idea).
- Otherwise, you just need to manually set the top, left, bottom, and right borders individually, as needed, but that is not very modular because it requires having knowledge of the content around you.
Floated Block Elements
- Once again, we see the double borders between the two elements.
- Floats are in effect, so normal line breaks are removed.
- If the browser width is too narrow, the elements will split onto multiple lines.
Inline Block Elements
Nested Blocks, Centered Vertically & Horizontally
This is a notoriously difficult problem with numerous hacks and tricks being put forth on the Internet. Left/right centering is fairly
easily accomplished using
margin: auto; but the vertical centering is a problem. As best I can tell, if you do not know
the height of the parent container, there is no way to do it using
display: block; in pure HTML