Previous

Box model

With the term Box model we describe the surrounding area of every HTML element. 

You can imagine that as an invisible box where the elements are laying inside.

 Box Model

These "boxes" consists of four layers.

  • The first is the content. The content is the actual text or media that we have inside our element.
  • The second is the padding. Padding is the area around our content.
  • The third one, the border, surrounds both the padding area and the content. The border can be displayed on the page using the "border" CSS property and assign it values.
  • Lastly, we have the margin. Margin surrounds all the above and defines the distance from other element areas in our code.
Example

The CSS rules:

<html lang="en">
  <head>
      <title>Style - CSS</title>
      <style>
        p{
           width: 33%; 
           text-align: left; 
           font-size: 0.75em; 
           color: #006600; 
           background: #fefecd; 
           padding: 2%; 
           margin: 0.75em; 
           border-width: 10px; 
           border-style: dotted;
           border-color: #900000;
        }
      </style>
  </head>
  <body>
      <h4>This is a Heading 4</h4>
      <p>This is lorem ipsum paragraph: <br>
           Lorem ipsum dolor sit amet, ea nec probo eloquentiam, in esse quando laboramus sea. <br>
           Ne omnesque detraxit eam, cu qui movet affert volutpat. <br>
           Qui amet option eu. Utamur euismod hendrerit vel no, ius natum salutatus forensibus in. <br>
           Sea diceret vivendo constituam at, duo an adhuc viderer evertitur.
      </p>
  </body>
</html>

will create a page displayed as:

Box model properties

For more information about the Box model: https://www.w3schools.com/css/css_boxmodel.asp

For more information about the Borders: https://www.w3schools.com/css/css_border.asp

For more information about the Margin: https://www.w3schools.com/css/css_margin.asp

For more information about the Padding: https://www.w3schools.com/css/css_padding.asp

Previous