Css media

The CSS box model explained with examples

If you are planning to create an impressive web page layout, then you need to know about the margins, borders, padding, and content. Every element of web design, whether it is an image or text, uses a box with these properties. You can easily create complex layouts by playing around with the box template. In this article, we’ll dissect the CSS box model and show you how to use these properties with some practical examples.

What is the CSS box template?

The CSS box model is a standard created by the World Wide Web Consortium. It describes all the elements of an HTML document as rectangular boxes with their own dimensions. These areas contain a content area and optional margin, border, and padding areas. So, let’s explore the parts of a CSS box.

Let’s take a look at the four layers of the CSS box template.

First layer: content

The content area contains the main content of the item which can be an image, text, or any form of media content. You can change the dimensions of block-level elements using size and width Properties.

Second layer: padding

Padding is the space between the content area and its border area. Although it sits around your content as white space, you can use a background color to visualize the difference. You can apply padding above, padding-right, padding-stockings, and fill-left properties to modify the space.

Third layer: border

The border wraps around the content and the padding area. You can resize and style the border using border width, border style, and border color Properties.

VIDEO OF THE DAY MAKEUSE

Fourth layer: Margin

The last layer of the box model is widely used to generate space between elements. The margin wraps around the content, padding, and border area. You can use upper margin, right-margin, low margin, and left-margin Properties. You can also set the margin property to negative or auto to get awesome investing techniques.

Project setup for CSS box template

Let’s build a mini-project to demonstrate the basic box model with a content box and padding, border, and margin properties. You can use text, images or multimedia content. We’ll start by making sure it’s structured properly.

Structure with HTML











CSS Box Model


smartphone
clock



To go out:


HTML structure for CSS box template

You can use your browser’s built-in features, such as Chrome Developer Tools, to see what’s going on. We are using two images from Unsplash. For simplicity, we are going to hide the smartphone image using display: none; until we need it later.

Styling using CSS

/*************************
BASIC STYLING
*************************/
* {
margin: 0px;
padding: 0px;
}
body {
display: flex;
flex-direction: row;
}
.display {
display: none !important;
}

Now let’s style our content area. First, we will define the size and width of the image. In addition, giving a background color helps better visualization. So let’s do it.

/*************************
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;
}

Give the contents room to breathe with the padding

You can either define padding above, padding-right, padding-stockings, and fill-left properties individually or use the shortcut. Try to use the shortcut if possible, as it can save you time. Let’s see how the padding works.

 /*************************
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;

To go out:


Content area with padding property

Draw lines around the padding using a border

When applying the border property, make sure that you are using the border color to make the border a color distinct from the background. You can select the border style either individually or all at once using the shorthand property. The same goes for the border width property.

You can also set the border radius to give the box rounded corners with a radius in pixels, 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: 4em 2em 2em;

/* border property shorthand */
/* border: 4em solid rgb(148, 234, 255); */

/* Set border-radius */
border-radius: 5em;
border-radius: 20%;


To go out:


Content area with border property

Add space between boxes with margin

You can center a box horizontally using margin: 0 automatic, provided it has a defined width.

 /*************************
MARGIN
*************************/
/* Applying margin 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 auto;

To go out:


Content area with margin property

You can specify the margin property using one, two, three, or four values. Values ​​can be length, percentage, or keyword like auto. Let’s understand how it works:

  • When you specify a single value, it means that all four sides will have the same margin.
  • When you specify two values, the first value means high margin and low margin while the second value specifies right-margin and left-margin.
  • When you specify three values, the first and last apply to high margin and low margin respectively. The middle value is for the horizontal area, that is, right-margin and left-margin.
  • When you specify all four values, they apply to the top, right, bottom, and left (clockwise) respectively.

Note that you can also use these shortcuts for the fill and border properties.

See also: The CSS3 essential properties cheat sheet

Have you ever used a negative margin? To view it let’s erase display: none to display our second image, then set a negative margin.

/* .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;
}

To go out:


Content area with negative margin

The Box template: creating a pixel perfect website

The box template allows you to set the space between elements, add borders, and easily create a complex layout. You can start building an awesome website right away. During this time you can explore the border-box property in detail and play with the code above.


You should understand that there are other methods for presenting content in CSS. These include CSS Grid and CSS Flexbox. Once you are comfortable with the box model, you should continue to educate yourself about these alternatives.


Getting Started with Featured CSS Flexbox
CSS Flexbox tutorial: the basics

Perfectly position your HTML elements using CSS Flexbox.

Read more


About the Author