Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
How to Organize Page Layout in CSS Box Model with Example
Can you not decide the difference between margin and padding, don’t worry let’s learn what is the CSS Box Model with example and how to master the HTML layout. If you are planning to build an awesome website layout then you need to know about margins, borders, padding, and content. All elements in web design like images or text use the box properties.
You can create a complex design layout, by playing these box models. In this post, you will use the CSS Box Model Examples.
What Is the CSS Box Model?
Firstly you understand the CSS box model created by the World Wide Web Consortium. These describe all elements with their HTML document with their own dimensions. These boxes have content areas with margins, borders, and padding areas. So let’s know this CSS box.
The CSS box model has four layers, let’s explore it.
First Layer: Content
The content area contains the main element which can be an image, text, or any form of media content. You can modify the height and width properties
Second Layer: Padding
The space between the content box and the border of the box is called padding. We can give with the help of Padding all over the content box whitespace. You can also give the background color to understand the difference between them. You can apply padding-top, padding-right, padding-bottom, and padding-left properties to modify the space.
Third Layer: Border
The border wraps the content area and the padding area. You can modify by using border-width, border-style, and border-color properties.
Fourth layer: Margin
The last layer which is the margin is widely used to give space between elements. The margin wraps the content area, padding area, and border area. You can modify the margin by using its properties like margin-top, margin-right, margin-bottom, and margin-left. You can also give the negative value or auto value to the margin property to achieve some awesome placement.
CSS Box Model Example:
Let’s create a mini project to understand the CSS box model explained with examples, with the help of the content box and padding, border, and margin properties. You can create this with text, images, or media content.
Structure with HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
body {
display: grid;
grid-template-columns: 30% 30%;
}
body img {
width: 100%;
}
</style>
<title>CSS Box Model</title>
</head>
<body>
<img class="content-box display" src="images/image1.jpg" alt="smartphone" />
<img class="content-box" src="images/image-clock.jpg" alt="clock" />
</body>
</html>
Output:
We are using two images from Unsplash. We simply hide the laptop image by using the display: none; we need it later.
Styling Using CSS:
<style>
/*************************
BASIC STYLING
*************************/
* {
margin: 0px;
padding: 0px;
}
body {
display: flex;
flex-direction: row;
}
.display {
display: none !important;
}
body {
display: grid;
grid-template-columns: 30% 30%;
}
body img {
width: 100%;
}
</style>
Now, let’s style our content box. Let’s give the height and width of the image. Also, give the background color for better visualization. So, let’s do it.
<style>
/*************************
CONTENT BOX
*************************/
.content-box {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
/* Styling the content box using height and width properties */
background-color: #fdf;
height: 20em;
width: 30em;
}
</style>
Give Content Room to Breathe With Padding
You set the padding properties individually like padding-top, padding-right, padding-bottom, and padding-left but it is very time taking to do, for that, we use the shorthand property. Try to use the shorthand property. See how padding works.
<style>
/*************************
PADDING
*************************/
/* Applying padding */
padding-top: 5em;
padding-right: 2em;
padding-bottom: 8em;
padding-left: 2em;
/* Padding shorthand */
/* top/right/bottom/left */
padding: 5em 2em 8em 2em;
/* top/horizontal/bottom */
padding: 5em 2em 8em;
</style>
Output:
Draw Lines around Padding Using Border
While using the border property, you make sure the border color and your background color are different. You can also select the border style to give various looks like dotted, dashed, solid, double, etc. While using the border property individually, it’s again time taking for that also we use the shorthand property. You can also modify it in various methods.
You can set also the border-radius for the box rounded at the corners using different measures like px, rem, em, or percent.
/*************************
BORDER
*************************/
/* Applying border properties */
/* Set the border color */
border-color: rgb(148, 234, 255);
/* Select border style */
border-top-style: solid;
border-right-style: dashed;
border-bottom-style: groove;
border-left-style: ridge;
/* border-style shorthand */
/* top/right/bottom/left */
border-style: solid dashed groove ridge;
/* Set border width */
border-top-width: 4em;
border-right-width: 2em;
border-bottom-width: 2em;
border-left-width: 2em;
/* border-width shorthand*/
/* top/right/bottom/left */
border-width: 4em 2em 2em 2em;
/* top/horizontal/bottom */
border-width: 2em 1em 1em;
/* border property shorthand */
/* border: 4em solid rgb(148, 234, 255); */
/* Set border-radius */
border-radius: 5em;
border-radius: 20%;
Output:
Add Space between Boxes with a Margin
If you want to center your box horizontally then simply use the margin: 0px auto; that help to center your box within definite width.
/*************************
MARGIN
*************************/
/* Applying mar gin properties */
margin-top: 4em;
margin-right: 5em;
margin-bottom: 3em;
margin-left: 5em;
/* Margin shorthand */
/* top/right/bottom/left */
margin: 4em 5em 3em 5em;
/* top/horizontal/bottom */
margin: 4em 5em 3em;
/* Using auto margin */
margin: 3em 3em;
Output:
You can set a specific margin property using one, two, three, or four values. These values can be a length, percentage, or keyword like auto. How it works:
- If you set only one value then, it means all sides have the same margin which you set.
- If you set the two values, then selected as the first value applies on margin-top and margin-bottom and the second value applies on margin-right and margin-left.
- If you select the three values, then the first value and the last value are applied on the margin-top and margin-bottom respectively. And the middle value is applied on the horizontal area, i.e., margin-right and margin-left.
- If you select all four values, then it applies in the top, right, bottom, and left (in clockwise order) respectively.
NOTE: You can also use this shorthand property for border and padding.
You can also check – The HTML Cheat Sheet: Tags, Attributes, and More
Can you set the negative margin?
Let’s erase the display: none; and give them the negative margin on the second image.
/* .display{
display: none !important;
} */
.content-box {
display: flex;
flex-direction: row;
align-items: center;
background-color: #fdf;
height: 20em;
width: 30em;
padding: 5em 2em 8em;
border-style: solid dashed groove ridge;
border-width: 4em 2em 2em;
border-radius: 20%;
/* Using negative margin */
margin: 3em -20em 3em 5em;
}
Output:
CSS Box Model Examples: Making Perfect Website
The box model defines the space between the elements, adds a border, and easily builds a complex-looking layout. You can start to create a webpage layout with the help of The CSS Box Model. I hope you understood the box model for laying out content in CSS. These have also included CSS Grid and CSS Flexbox, once you are comfortable with the box model then you start to should understand these alternatives.
