You know that a web browser renders elements as a rectangular box. know you can understand that Box Model is the most fundamental thing in CSS. It determines the size, margin, padding, border, and margin of an object on the page.

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.

Some HTML elements like <span> and <p> are inline to text rather than the structural elements of a page. Elements like <div> are large block elements.

Block elements have a fixed width and height which sometimes span the entire page, while inline elements are within lines of text, which means they have content floating beside them. Another type of element which is often used is an inline-block, which is simply a block of fixed width and height, within an inline context, such as within a block of text.

Regardless of whether an element is inline or a block, all elements have a number of core 'box' attributes. Those are shown in the image below.

CSS Box model.jpg

Box Model consists of four main parts which include content area, padding area, border area, and margin area.

The padding is the space between the content area and the border, while the space outside the border is the margin area.

By default, an element has the width and height as its content except if the width and height of the content area, padding area, border area, and margin area are set explicitly.

Content: The content of the box, where text and images appear. In the above image content is <div>.
Padding: Clears an area around the content. The padding is transparent
Border: A border that goes around the padding and content
Margin: Clears an area outside the border. The margin is transparent

Display

Display affects the box model, by defining if an object is block or inline. It can allow you to hide an item. For the purposes of the box model, let's think about a few key properties:

none - the item is hidden.
inline - the item is inline, i.e. inline with the text, it cannot have a width or height added to it.
block - the item is a block, i.e. it takes up the entire width and starts on a new line.
inline-block - the item is inline with the text, but it can have a width and height added to it in CSS.
contents - the item is displayed as if its container does not exist, and is added to the container above.

Box Model Properties

Content

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

 <h2>I'm the Content</h2>

Padding

Padding is the space that separates the content and the border. Its main purpose is to create space around the HTML element's content inside the border and make the content readable to the 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 sides around the content.

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

Instead of using these four properties, you can use the shorthand of it, i.e. padding.

p {
   padding: 10px, 20px, 30px, 40px
}

Border

The border is used to separate the padding and the content, and can be applied to all the sides of the box or to selected side(s) - top, right, bottom, and/or left. It allows you the explicitly define its width, color, style, and radius.

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

Instead of using these four properties, you can use the shorthand of it, i.e. border.

p {
  border: dotted, 2px, 5px, red;
}

Border Style

This property is used to determine the type of style of the content's border. It following values,

solid: a solid border.
dashed: a dashed border.
dotted: 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: no border.
hidden: a hidden border.

Border Width

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

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

border-width: thick | medium | thin ;

Border Color

This is used to determine the color of the four borders. Its values can be:

name - specify a color name, like red, blue, green
HEX (Hexadecimal) - specify a HEX value, like "#ff0000"
RGB(Red, Green, Blue) - specify a RGB value, like "rgb(255,0,0)"
HSL(Hue, Saturation, Lightness) - specify a HSL value, like "hsl(0, 100%, 50%)"
transparent

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 */
}

Border Radius

This is used to specify the radius of an element's border. it allows the addition of rounded corners to elements.

p{
  border: 5px solid pink;
  border-radius: 25px;
}

Margin

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

p{  
    margin-top: 50px;  
    margin-bottom: 50px;  
    margin-right: 100px;  
    margin-left: 100px;  
}

Example

https://codepen.io/Sneha_Raut/pen/zYaaOgv

Conclusion

This is everything you need to know about CSS Box Model. Please feel free to share your thoughts.

If you enjoyed this article

Follow me on Linked In

CSS Box Model

Table of contents