Master the CSS Box Model Basics

CSS is one of the best way to control your website’s design and functionality.

Before doing so, you must first understand one of the most fundamental web-design principles: The CSS Box Model. CSS Cascading Style Sheets Enables you to make stylistic changes to your page layout and the elements on those pages to ultimately improve your Website look and Feel.

Above Image is the Best example of the Box Model in CSS.

The CSS Box Model

In CSS the term “BOX MODEL” is use when talking about design and layout.

The CSS box model is essentially a box that wraps around every HTML element. The box model Consist of :-

Content - The content of the box, Where text and image content appear.
Padding - is to use for Clears an area around the Specific Content and padding is Transparent.
Border - A Border that goes around the Content.
Margins -use for Clears an area outside the Border or Content and the Margin is Transparent.

Following Diagram is Example of The CSS Box Model.

1. Content :

Content Box is an area in which the actual Content of an Element, Such as Text or Images contain and the Width and height properties define the dimensions of this Content Box.

Full HTML code.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Box-Model</title>
</head>
<body>
    Margin ↓
    <div>
        Padding Around 
        Content
    </div>

</body>
</html>

2.Padding :

Padding Box is Surrounding the content Box is the Padding. Padding is the space between the content of the box and its defined border. In other words, It is space between the Border of the box and the content of the box.

How to set Padding?

You can set the padding individually for each side using padding-top, Padding-right, Padding-bottom, Padding-left, or using the Shorthand Padding Property. In shorthand we can give padding at once to all sides. For example:

To set the padding of the <div> element, you can use the following CSS code:


div {
/* Padding on  individually */
    padding-left: 10px;
    padding-right: 20px;
    padding-top: 20px;
    padding-bottom: 10px;
}
/* or */
div{
 padding: 10px; /* 10px padding on all sides */
}

Border :

The border surround the padding and the content of the HTML Element. by default, a border is invisible that separates the edge one box from the other Surrounding Boxes. We can define the border width, style, and color using properties like border-width, border-style, and border-color or collectively using the shorthand border property.

A shorthand border property set the width, style, and color of the border at once. We can also use the individual properties of border-width, border-style, and border-color individually for each side of the HTML element. And also using border-radius border get curve. For example:

To set the border of the <div> element, you can use the following CSS code:

div {
   border: 2px solid rgb(255, 165, 0); /* 2px solid black border */
}
/* or */
div{
    border-width: 5px;
    border-style: solid;
    border-color: orange;
    border-radius: 10px;
}

Margin :

Margin is the distance between a box board and the box next to it. It Creates a white space around the boxes. We individually set margins for each side using margin-top margin-right, margin-bottom, and margin-left. or collectively using the margin shorthand property.

A shorthand margin property sets all four margins, such as top-margin, right-margin, bottom-margin, and left-margin at once. For example:

To set the margin of the <div> element, you can use the following CSS code:


div {
   margin: 20px; /* 20px margin on all sides */
}
/* or */
div{
    margin-top: 20px;
    margin-right: 30px;
    margin-bottom: 20px;
    margin-left: 30px;

}

By understanding and utilizing the properties of content, padding, border, and margin, you can control the layout and spacing of elements on a web page. I hope that you now understand the basic concepts of the CSS box model.

Basics the CSS Box Model: A Comprehensive Guide