Default HTML layout

avatar

Borislav Hadzhiev

Mon Dec 07 20202 min read

banner

Photo by Kelly Sikkema

How block and inline html elements are positioned on the page by default

Html elements are laid out by taking the elements' content, adding any padding, border and margin around them.

Block level HTML elements by default #

  1. take 100% of the width of their parent element
  2. are as tall as their content
  3. are laid out vertically and are placed on a new line
  4. are separated by any margin that is set on them. If two adjacent elements have margin set on them and the two margins touch, the larger margin remains and the smaller one disappears (margin collapsing).

Inline level HTML elements by default #

  1. are as wide as their content
  2. are as tall as their content
  3. sit on the same line as one another and any adjacent text content, as long as there is space for them inside the width of the parent block element. If there isn't space then the overflowing text or elements is moved to a new line.
  4. are not 100% consistent with vertical margins. According to the css spec: vertical margins will not have any effect on non-replaced inline elements. So for example margin-top or margin-bottom has no effect on a span element or an a element, but both of the vertical margins have effect on img, textarea, input elements.
  5. don't allow us to set their height and width as they just sit inside the content of block level elements. If you want to control the size of an inline element, you have to set it to behave like a block element with display: block; or inline-block element with display: inline-block;

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee