HTML

Last Updated: 9/18/2022

Block and Inline Elements

  • Every HTML element has a default display value, depending on what type of element it is.
  • There are two display values: block and inline.

Block Elements

  • A block-level element always starts on a new line.
  • A block-level element always takes up the full width available.
  • A block level element has a top and a bottom margin, whereas an inline element does not.
  • Block level elements used as container for other HTML elements
  • header, nav, main, div, section etc are block level elements

<h1>this is block element</h1>

Inline Elements

  • An inline element does not start on a new line.
  • An inline element only takes up as much width as necessary.
  • An inline element cannot contain a block-level element!

<em>Inline element</em> <p><span>Inline element inside block level element</span></p>

Div element

  • Used as a container for other HTML elements.
  • Defines a section in a document (block-level)

<div>contianer of other elements</div>

Span element

  • An inline container used to mark up part of the text
<div>
<span>span1</span>
<span>span2</span>
</div>
Previous
Next