Block Boxes and Inline Boxes

HTML elements are either block level or inline and are accordingly rendered by the browser as block boxes or inline boxes.

 

Block boxes

  • Stretch across the full width of the containing element / page
  • Extend vertically down the page (as content is put in)
  • Can contain any other boxes
  • Often have margins, borders, and padding set
  • e.g.: <body>, <h1>, <p>, <ul>, <div>

 

 

Inline boxes

  • Contained inline within the parent block box element
  • Only big enough to fit their content
  • Can contain other inline elements, but not block boxes
  • Rarely have margins, borders or padding set
  • e.g.: <span>, <a>, <strong>, <em>, <code>

Leave a Reply