You are currently viewing CSS Box Model
css box model

CSS Box Model

The CSS box model represents every HTML element as a rectangular box. A HTML element consists of a content area, padding, a border, and a margin.

CSS BOX MODEL
CSS BOX MODEL

Understanding the box model is essential for any web designer or developer. Laying out content on website will be easier when we understand how to manipulate CSS properties within the box model.

Manipulating the Box Model

Many different CSS properties can be used to size the “box” that constitutes an element. In most cases, we’ll need to specify the content area size, padding, and margins. These are normally expressed in percentages, %, and pixels, px.

Height and Width

We use the height and width CSS properties to change the height and width of an element’s content area.

Let’s start by specifying the height and width for our layout:

HTML
<html>
 <head>
   <title>Type Selectors</title>
 </head>
 <body>
   <div class = "container">The Box Model
   </div>
   <div class = "content">
     <div class = "text">The She Coder
     </div>
   </div>   
 </body>
</html>
CSS
.container {
  font-size : 36px; 
  font-weight : bold;
  text-align : center;
}
.content{
  text-align : center;
  height : 50px;
  width : 300px;
}
.text{
  font-size : 35px;
  color : #E75480;
}

We have only set the content area width and height. We need to add padding, borders, and margins to calculate the full size of an element.

The total width for the element can be calculated as:

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

Similarly, The total height for the element can be calculated as:

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

Padding

The padding property is used to create spacing between an element’s content area and border.  

We can also apply padding to a single side of the element using more specific CSS properties. These include padding-bottom, padding-left, padding-right, and padding-top.

Let’s use padding property for our layout:

HTML


<html>
 <head>
   <title>Type Selectors</title>
 </head>
 <body>
   <div class = "container">The Box Model
   </div>
   <div class = "content">
     <div class = "text">The She Coder
     </div>
   </div>   
 </body>
</html>
CSS
.container {
  font-size : 36px; 
  font-weight : bold;
  text-align : center;
}
.content{
  text-align : center;
  height : 50px;
  width : 300px;
  padding : 50px;
}
.text{
  font-size : 35px;
  color : #FF0659;
  font-weight : bold
}

Border

The border CSS property sets the border of an element. It is the area between the box’s padding and margin. The syntax for the border property is :

CSS
border: width style color;

The width can be given in % or px. The style include things like dotted, double, and solid. A full list of border styles can be found here. The color can be any valid color value.

Now, let’s look at how the border affects the layout:

HTML


<html>
 <head>
   <title>Type Selectors</title>
 </head>
 <body>
   <div class = "container">The Box Model
   </div>
   <div class = "content">
     <div class = "text">The She Coder
     </div>
   </div>   
 </body>
</html>
CSS
.container {
  font-size : 36px; 
  font-weight : bold;
  text-align : center;
}
.content{
  text-align : center;
  height : 50px;
  width : 300px;
  padding : 50px;
  border : 50px solid #9807D6;
}
.text{
  font-size : 35px;
  color : #FF0659;
  font-weight : bold
}

Margin

The margin property lets you define how much space surrounds the outside of the HTML element past its border.

Margin can be broken out into more fine-grained properties to target a specific side, i.e. margin-top, margin-bottom, margin-right, and margin-left.

Let’s see how the margin affects the layout:

HTML


<html>
 <head>
   <title>Type Selectors</title>
 </head>
 <body>
   <div class = "container">The Box Model
   </div>
   <div class = "content">
     <div class = "text">The She Coder
     </div>
   </div>   
 </body>
</html>
CSS
.container {
  font-size : 36px; 
  font-weight : bold;
  text-align : center;
}
.content{
  text-align : center;
  height : 50px;
  width : 300px;
  padding : 50px;
  border : 50px solid #9807D6;
  margin-left: 370px;
}
.text{
  font-size : 35px;
  color : #FF0659;
  font-weight : bold
}

Thus, we saw how these property affect the layout and why we should specify these property to properly lay out content on our website.

Tags: ,