CSS : The Box Model

CSS : The Box Model

The CSS Box model is used to create the design and layout of webpages, It occurs when an HTML element is rendered on the browser each element is expressed visually as a rectangular box. It consists of four main parts which includes content area, padding area, border area, and margin area. The padding area is the space between the content area and the border area, while space outside the border area is the margin area. By default an element has the width and height as it content except if the width and height of the content area, padding area, border area, and margin area are set explicitly.

download.png

The Content Section

Content refers to different items inside a container, jar or a box. In CSS the HTML tags are the box and they contains different items like images, videos and text such as letters, number and symbols. It is referred to as the actual content in the box model.

<!DOCTYPE html>
  <html>
  <head>
  </head>
  <body>
    <h2>I'm the Content</h2>
  </body>
</html>

The Padding Section

Padding is the space that separates the border and the content. It's main aim is to create room around the HTML element's content inside of a border and make the content breathe, and feel readable to user. You can only define the CSS padding width i.e. thickness. It's transparent and does not have a background color.

The code snippet below shows how to set the padding of all four side around the content

p {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
}

The Border Section

Borders are literarily used to set boundaries, In CSS Box Model they are used to separate the padding section from the margin section. The CSS border allows you the explicitly define it's width, color, style, radius.

<style>
  p{
    border-style: dotted;
    border-width: 2px; 
    border-radius: 5px;
    border-color: red;
  }
</style>

The Border Style

This is used to specify the type of style around the content's border. They include;

  • solid: specifies a solid border.
  • dashed: specifies a dashed border.
  • dotted: specifies a dotted border.
  • double: specifies a double border.
  • inset: specifies a 3D inset border. The effect depends on the border-color value.
  • outset: specifies a 3D outset border. The effect depends on the border-color value.
  • groove: specifies a 3D grooved border. The effect depends on the border-color value.
  • ridge: specifies a 3D ridged border. The effect depends on the border-color value.
  • none: specifies no border.
  • hidden: specifies a hidden border.

download2.png

The Border Width

This is used to specify the thickness of the border, it can be predefined values thin, thick, medium or a specific size in in px, pt, cm, em, etc.

<style>
  p {
  border-left-width: 20px;
  border-right-width: 30px;
  border-bottom-width: 40px;
  border-top-width: 50px;
}
</style>

The Border Color

This is used to specify the color of the four borders. It's values can be by:

  1. name - specify a color name, like red, blue, green
  2. HEX (Hexadecimal) - specify a HEX value, like "#ff0000"
  3. RGB(Red, Green, Blue) - specify a RGB value, like "rgb(255,0,0)"
  4. HSL(Hue, Saturation, Lightness) - specify a HSL value, like "hsl(0, 100%, 50%)"
  5. transparent
<style>
p{
  border-style: solid;
  border-color: red;  /* specify a color for all sides*/
}
/*OR*/
  p{
  border-style: solid;
  border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */
}
</style>

The Border Radius

This is used to determine the radius of an element's border. it allow one to add rounded corners to element.

<style>
p{
  border: 5px solid pink;
  border-radius: 25px;
}
</style>

The Margin Section

Margin are used to specify the space outside the border. It is also transparent and does not have a background color.

<style>  
p{  
    margin-top: 50px;  
    margin-bottom: 50px;  
    margin-right: 100px;  
    margin-left: 100px;  
}  
</style>

Using Shorthand

The use of shorthand makes your CSS cleaner, often more readable to fellow developers, It allows you to set multiple values at a go saving you time and energy. we'll be looking at the shorthand for margin, padding and border.

Border's Shorthand

<style>  
  p {
     border-width: 10px;
     border-style: solid;
     border-color: green
  }
   /*OR*/
  p {
    border: 10px solid green;  /*Shorthand*/
  }
</style>

Padding and Margin Shorthand

The shorthand for margin and padding are alike since we can specify only their width, they have no style and color.

  • If the padding or margin has only one value, All the sides will have the same values

    <style>  
    p {
      padding: 20px; 
      margin: 50px;
    }
    /*OR*/
    p {
      padding-top: 20px;
      padding-right: 20px;
      padding-bottom: 20px;
      padding-left: 20px;
    
      margin-top: 50px;  
      margin-bottom: 50px;  
      margin-right: 50px;  
      margin-left: 50px;  
    }
    </style>
    
  • If padding and margin has two values. It means top and bottom values are the same and left and right properties are also the same.

    <style>  
    p {
    padding: 25px 50px;
    margin: 30px 60px;
    }
    /*OR*/
    p {
      padding-top: 25px;
      padding-bottom: 25px;
      padding-right: 50px;
      padding-left: 50px;
    
      margin-top: 30px;  
      margin-bottom: 30px;  
      margin-right: 60px;  
      margin-left: 60px;  
    }
    </style>
    
  • If padding and margin has three values. It means left and right properties are also the same while the first and last element represent top and bottom respectively.

    <style>  
    p {
    padding: 25px 50px 75px;
    margin: 30px 60px 90px;
    }
    /*OR*/
    p {
      padding-top: 25px;
      padding-bottom: 75px;
      padding-right: 50px;
      padding-left: 50px;
    
      margin-top: 30px;  
      margin-bottom: 90px;  
      margin-right: 60px;  
      margin-left: 60px;  
    }
    </style>
    
  • If padding and margin has four values. The first value is for the top, the second value is for right, the third value for the bottom, while the last value is for the left.

    <style>  
    p {
      padding: 25px 50px 75px 100px;
      margin: 30px 60px 90px 120px;
    }
    /*OR*/
    p {
      padding-top: 25px;
      padding-right: 50px;
      padding-bottom: 75px;
      padding-left: 100px;
    
      margin-top: 30px;
      margin-right: 60px; 
      margin-bottom: 90px;  
      margin-left: 120px;  
    }
    </style>
    

    Below is a pictorial representation

download6.jpg

The Box Model is an essential part of CSS and it allows you to better align elements on a webpage, if you want to read more on the Box Model Concept here are interesting but free resources to guide you.

Thanks for reading.