Basic Display Types : Block, Inline, and Inline Block
Block Elements
DIV #1
DIV #2


  • 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.
  • Unfortunately, the border-collapse property 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-shadow instead of borders, but I think that's too tricky and I'll never remember it (although learning more about box-shadow in 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
DIV #1, with float: left;
DIV #2, with float: left;


  • 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 Elements
SPAN #1. The width and height is ignored. SPAN #2. The width and height is ignored again.

Inline Block Elements

DIV #1 with display: inline-block;

Note: Watch out for inadvertant spaces between the elements

DIV #2 with display: inline-block;

Nested Blocks
NESTED DIV #1, 50% height, 50% width
NESTED DIV #2, 50% height, 50% width
DIV #2

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 and CSS (no JavaScript). The most straightforward way I've found is to change the parent element to display: table‑cell; and use vertical‑align: middle;.