HTML for Beginners: Block, Inline elements #8

Block elements

Block elements are elements that take up the full width available, and always start on a new line. They create large blocks of content, and their behavior is defined in the CSS display property as a block.

<div class="container">
  <div>Div 1</div>
  <div>Div 2</div>
</div>

<style>
  .container {
    background-color: #666;
    padding: 1rem;
  }
  
  .container div {
    background-color: #498ab1;
    color: #fff;
    padding: 1rem;
    text-align: center;
  }
  
  .container div:last-child {
    margin-top: 0.5rem;
  }
</style>

By default, block elements stretch to fill the entire width of their parent container, regardless of their content’s width. This makes them ideal for creating sections of content that span the entire width of the page or container.

Each block element begins on a new line, forcing the following content to appear on a new line.

They can have margins and padding that push other content away.

Example of block elements

<div> <p> <h1> <ul> <header>

Inline elements

Inline elements are elements that only take up as much width as necessary, and do not start on a new line. They are used for…