CSS Box Model (Padding, Margin, Border)

CSS Box Model (Padding, Margin, Border)

CSS Box Model:

The CSS Box Model is used to create a definition for the way the HTML elements are structured on the screen. And this approach accounts for options such as margins, padding, borders, and all the properties that manipulate them.

In any webpage, each element can be considered of having its own box. As all the elements on a webpage have to work together with each other, it is quite important to know just how each of those boxes works.

So let's just see what the box model looks like with its different parts:

+--------------------------------------------------+
|                                                  |
|  +--------------------------------------------+  |
|  |                                            |  |
|  |  +----------------------------+            |  |
|  |  |                            |            |  |
|  |  |                            |            |  |
|  |  |                            |            |  |
|  |  |                            |            |  |
|  |  +----------------------------+            |  |
|  |                                            |  |
|  |                                            |  |
|  +--------------------------------------------+  |
|                                                  |
+--------------------------------------------------+
  • The content area is the area inside the padding, border, and margin of the element. This is where the element's content is displayed.

  • The margin is the space outside the border of the element. The margin is transparent, and it is used to create space between the element and the other elements around it.

  • The border is a thin line that surrounds the padding and content of the element. The border can have various styles, such as solid, dashed, or dotted.

  • The padding is the space between the content and the border of the element. The padding is transparent, and it is used to create space between the content and the border.

Let's just have a look at the example:

element {
  /* Set the width and height of the content area */
  width: 300px;
  height: 300px;

  /* Add some padding */
  padding: 20px;

  /* Add a solid border */
  border: 4px solid black;

  /* Add some margin */
  margin: 30px;

   /* Total width: 300px + (2*4px) + (2*20) + (2*30) = 408px
     Total height:  300px + (2*4px) + (2*20) + (2*30) = 408px */
}

This code will create a box with a content area that is 300 pixels wide and 300 pixels height, with a 20-pixel padding on all sides, a 4-pixel solid black border on all sides, and a 30-pixel margin on all sides. The resulting box will be 408 pixels wide and 408 pixels high .

Box Model (Padding, Margin, Border)

Now let us learn more about the properties used in the box model, padding margin and border

  • Padding

Padding is the space between the content and the border of the element. The padding is transparent, and it is used to create space between the content and the border.

Here are four ways to add padding to any element.

/* Apply to all four sides */
padding: 1em;

/* top and bottom | left and right */
padding: 5% 10%;

/* top | left and right | bottom */
padding: 1em 2em 2em;

/* top | right | bottom | left */
padding: 5px 1em 0 2em;
  • Margin

Margin is the space outside the border of the element. The margin is transparent, and it is used to create space between the element and the other elements around it.

Here are four ways to add margin to any element.

/* Apply to all four sides */
margin: 1em;
margin: -3px;

/* top and bottom | left and right */
margin: 5% auto;

/* top | left and right | bottom */
margin: 1em auto 2em;

/* top | right | bottom | left */
margin: 2px 1em 0 auto;
  • Border

Border is a thin line that surrounds the padding and content of the element. The border can have various styles, such as solid, dashed, or dotted.

/* style */
border: solid;

/* width | style */
border: 2px dotted;

/* style | color */
border: outset #f33;

/* width | style | color */
border: medium dashed green;

You can also use the border property to set the border style, width, and color in a single shorthand declaration:

/* Add a 2-pixel wide solid red border to all sides of the element */
element {
  border: 2px solid red;
}

Takeaway

It is a very useful concept in CSS.

That's it for the day see you in the next blog until then...

Keep Writing Code ❤️