How To Add CSS Box Model

Published October 26, 2020 by Jvalant Pandya.

 

CSS Box Model

 

“CSS Box Model” is generally referred to as design & layout in CSS. It is the box that can be imagined as concentric-rectangles which has the outer-most rectangle as margin. This rectangle is ordinarily transparent. The next rectangle inside represents a border which has a variable thickness and is filled with colors. Inside this, the third rectangle is of padding which is transparent too and the one in the center is the content that has been written inside the HTML tag.

CSS Box Model is the most basic concept that should be learned by a developer to understand the elements of a page. According to W3C, the CSS box model forms the boxes that make the basic visual formatting of a web page. The CSS Box Model underpins most of the layout and positioning of a webpage.

Let’s take a look at one such CSS Box Model

CSS Box Model

 

We will make our first sample box to have an understanding. Remember, we style the box in CSS. So have a look at the HTML code and go meticulously through the CSS code. The CSS code has several properties like width, border, padding, margin-left & margin-right. Alter the values in it and understand the output using CodePen.

Here’s the HTML code:

<html>
<head>
<title> How to add css box model </title>
<link rel= "stylesheet" href= "samplebox.css">
</head>
<body>
<h2> The Box Model </h2>
<p> CSS Box Model added here is around the content inside the div tag. </p>
<div> <p> I am wrapped inside with padding of 50px & border 300px. </p>
</div>
</body>
</html>

CSS FileName: SampleBox.css

div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin-left: 20px;
margin-right: auto;
}

The output will look as follows:

CSS Box Model

How To Center The Box Model

The sample box which we created above can be aligned to the center simply by adjusting the outer rectangle of our Box Model, i.e. the margin. So we can change the value of the margin in a manner the box shifts to the center of our webpage. Here I have set the value of margin-right to 400px which aligned the box to center, change those values & follow the code for better clarity.

Here’s the HTML code:

<html>
  <head>
    <title>How to add css box model</title>
    <link rel= "stylesheet" href= "centerbox.css">
  </head>
  <body>
    <h2>  The Box Model </h2>
    <p> Altering the values in the properties to see how the output cahnges </p>
    <div><p> I am in the center of the webpage all thanks to margin-left </p>
    </div>
  </body>
</html>

CSS File: Centerbox.css

div {
background-color: powderblue;
width: 400px;
border: 20px solid yellow;
padding: 70px;
margin-left: 400px;
margin-right: auto;
}

This is what the output will be:

CSS Box Model

 

How To Create A Dashed Border & Align The Box

The property border has several values, we can use  “dashed color” with color being what we want and the dashes break the border. Learn using the code given below:

HTML Code:

<html>
  <head>
    <title> How to add css box model </title>
    <link rel= "stylesheet" href= "dashedbox.css">
  </head>

  <body>
    <h2> The Box Model </h2>
    <p> Creating a different kind of border and aligning the box model differently.</p>
    <div><p> The dashed border is of the value for the property <i>border</i> </p>
    </div>
  </body>
</html>

CSS File: Dashedbox.css

div {
background-color: orange;
width: 400px;
border: 5px dashed black;
padding: 15px;
margin-left: 60%;
margin-right: auto;
}

Here’s how the output will be:

CSS Box Model

The following codes help us understand how altering the values can yield different outputs. Also, we can imply from the codes that

Total element width = width + left border + right border + left padding + right padding + left margin + right margin.

And,

Total element height = height + top margin + bottom margin + padding + bottom padding + top border + bottom border.

The calculation of total element width and height if known to us can be helpful while designing the webpage with specific alignments.

Conclusion

The beginning of the article introduced the concept of the Box Model and how to add it to our code. We also learned how to align the box model and add different types of borders to it. A novice developer should always start out by understanding the concept of CSS Box Model to create aesthetic looking web designs. To keep learning such CSS techniques, subscribe to our blog!

To know how to change text color in CSS, visit our previous blog!

 

 

 

 

 

Share and Enjoy !

0Shares
0 0