css box model

When we talk about designing and layouts in the field of web, we use box model. CSS box model is a box that encloses all html elements in a separate boxes. These boxes consist the actual html content along with their paddings, borders and margins too.

When we define some height and width to any element, it will be assigned to the actual content. Add up the paddings, borders and margins and the final height and width will be determined.

In CSS, we use the box model to define the height, width, backgrounds for any HTML element and then float them left or right to create a desired layout.

Box Model Example

Here, the white background area is the content area whereas the light black background is the padding, the blue background is the border while the dark black background is the margin defined.

Most of the people get confused between the margin and padding property. Margin is the outer space from the box that separates it from other boxes while padding is the space inside the box that wraps the actual content and remains inside the border of the box.

Designing Layouts

With the same principle we can use multiple boxes and float them left or right as per the need to create a design as displayed below.

Layout Without Content

<div class="boxes-holder">
  <div class="box1">
  </div>
  <div class="box1">
  </div>
  <div class="box1">
  </div>
  <div class="box1 box-last">
  </div>
</div>

<div class="clear"></div>

<div class="boxes-holder">
  <div class="box2">
  </div>
  <div class="box3">
  </div>
</div> 

And the styles displayed here...

<style>
.boxes-holder{ 
  margin-top: 20px; 
}
.box1{ 
  width: 24%; 
  float: left; 
  padding: 15px; 
  height: 200px; 
  background: #222d32; 
  margin-right: 22px;
}
.box-last{ 
  float: right; 
  margin-right: 0px;
}
.box2{ 
  width: 49.3%; 
  float: left; 
  height: 200px; 
  background: #222d32; 
}
.box3{ 
  width: 49.3%; 
  float: right; 
  height: 200px; 
  background: #222d32; 
}
.clear{ 
  clear: both; 
}
.box1{ 
  width: 24%; 
  float: left; 
  padding: 15px; 
  height: 200px; 
  margin-right: 22px; 
}
.box-last{ 
  float: right; 
  margin-right: 0px;
}
.box2{ 
  width: 49.3%; 
  float: left; 
  height: 200px; 
}
.box3{ 
  width: 49.3%; 
  float: right; 
  height: 200px; 
}
</style>

Here, we defined some height and a background color to all the HTML elements to make them viewable as they have no contents inside it. With contents, it's not necessary to define a height for the elements unless you want equal heights for all of those in a row.

Now, let's see those boxes without the height and background defined but contents placed inside it.

Layouts with Content

<div class="boxes-holder">
  <div class="box1-1">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. 
  </div>
  <div class="box1-1">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. 
  </div>
  <div class="box1-1">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. 
  </div>
  <div class="box1-1 box-last">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. 
  </div>
</div>

<div class="clear"></div>

<div class="boxes-holder">
  <div class="box2-1">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. 
  </div>
  <div class="box3-1">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. 
  </div>
</div> 

And the styles....

<style>
.boxes-holder{ 
  margin-top: 20px; 
}
.box1-1{ 
  width: 24%; 
  float: left; 
  padding: 15px; 
  margin-right: 22px; 
}
.box-last{ 
  float: right; 
  margin-right: 0px;
}
.clear{ 
  clear: both; 
}
.box2-1{ 
  width: 49.3%; 
  float: left; 
}
.box3-1{ 
  width: 49.3%; 
  float: right; 
}
</style>

0 Like 0 Dislike 0 Comment Share Tweet