Cascading Style Sheets – The Box Model
When I started off coding, the CSS Box Model was a bit confusing to me, but as I practiced it repeatedly over time, I got to understand the subject properly. As a beginner you might be facing the same challenges as me, but don’t worry! I’ll try to explain it in the simple and an understandable way, so that after you are done reading this article, you will feel a lot more confident working with the Box Model.
CSS Box Model is a very important concept, and is the foundation of a web layout. Every element tag is represented on the web page in a rectangular format which isn’t visible until styling is applied to it. The Box Model is a box that wraps all html elements in a box. The Box Model also have certain properties e.g. width, height, content, padding, border and margin.
Box Model Properties
Width and Height set the width and height of the content box which is the part where the content of the box is displayed.
Content is the textual document that the browser renders when you run your html file. e.g.
<h1>This Is an Article on Box Model</h1>
The text in between the header tag is the content, also the content could be an image, text or media contents so long as it is inside an html tag.
Padding is the space around the content area within the Box Model. The padding can be set on one or more sides of a box using the shorthand property e.g.
padding: 5px 10px 5px 10px;
This sets the padding for each side of the box from top right bottom and left, or you set it individually depending on your preference: border-top-width, border-top-style, border-top-color
Border is the areas between the padding and margin. By default, the border of the box size is 0– which makes it invincible but styles can be applied to make the border more pronounced. You can change the border-width, border-style, border-color and you can equally set each side of the border depending on how you choose to do your designs e.g. border-top-width, border-top-style, border-top-color
Margin is the area outside the border. A simple way to explain the Box Model is to think of it as a picture frame. The image itself is the content, the frame is the border and the area outside the border you have the margin. The margin also have these individual properties margin-top, margin-right, margin-bottom, and margin-left. See code snippets below.
A Practical Example
INput
style>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.box {
font-family: 'Lucida Sans';
border: 20px dashed coral;
text-align: center;
color: goldenrot;
background-color: black;
padding: 20px;
margin: 50px;
}
p {
margin: 5px;
font-weight: 300px;
text-align: justify;
color: blue;
}
</style>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- html content -->
<section class="row">
<p>CSS Box Model</p>
<div class="box">
<span>Box One</span>
<p>
This area is the actual content of the box in a black background. I added
20px padding, and 20px dashed coral border.
</p>
<p>
The space between the two boxes is called margin which is 50px.
</p>
</div>
<div class="box">
<span>Box Two</span>
<p>
This area is the actual content of the box in a black background. I added
20px padding, and 20px dashed coral border.
</p>
<p>
The space between the two boxes is called margin which is 50px.
</p>
</div>
</section>
</body>
</html>
Output
The image above shows the Box Model when rendered by the browser. The black background with blue text is the content area, having a 20px padding, and a 20px dashed coral border. Feel free to try out other examples.
Conclusion
Now you should be familiar with the CSS Box Model and how they work. And how about trying out a three or four column Box models? Note, you really don’t have to memorize all of these! All you need is a good and comprehensive reference to fallback to should you get stuck.
For more practical examples check out this tutorials for a more extensive study.
