A set of guidelines known as the box model in CSS controls how your website is displayed online. For HTML elements, a rectangular box is formed in this model. Each element is arranged in accordance with its size, type, position, relationship to other elements, and external considerations such as viewport size. Content, padding, a border, and a margin make up this box.
When we writing HTML code, all items are considered as boxes. We can add a border around the items and space between them using the box model. Here is an illustration of the CSS box model’s various layers.
This means that every web page you view is actually composed of components that have been wrapped in rectangular boxes and are then placed in relation to one another. Depending on the type of element each is, they can be positioned next to, above, below, or even inside of one another.
Block-level elements and inline elements are the two categories of HTML elements.
Block-level Elements
Block-level elements by default begins on a new line and occupy 100% of the available space, which may be the whole width of the viewport or of its container if it is contained inside another element. The following are the example of block level element <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ol>, <ul>, <pre> etc.
Inline Elements
Inline elements do not by default start on a new line or occupy the entire viewport. In actuality, the width and height attributes are unnecessary. Inline elements do not interrupt the flow of the document like block-level components do. Block-level elements cannot be contained by inline elements, however inline elements can contain data. The following are the example of Inline elements : <b>, <big>, <i>, <small>, <tt>, <abbr>, <acronym>, <cite>, <code>, <dfn>, <em> etc.
In CSS, the Box-Model has a number of properties. Some of them use the content property to display text, photos, and other items that can have their sizes changed by the width and height properties.
The padding attribute is used to add space inside any specified borders around the element. The border property is used to define the style, colour, and width of the border as well as to cover the content and any padding.
The element’s border region can be surrounded by space by using the margin property.
Content Area
Text, photos, and other media items can be found in this section. Its perimeter is defined by the content edge, while its width and height are determined by the content-box dimensions. In other words, the content area is only wide enough and high enough to contain the information, which could be as little as one word. The min-width, max-width, min-height, and max-height attributes can also be used to set the content edge if the element is a block element.
Padding Area
It includes the padding for the element. This region actually includes the space inside the border box and around the content area. Its dimensions are determined by the height and width of the padding box. This region basically consists of the space inside the border box and around the subject area. The padding box’s proportions depend on its height and width.
Border Area
It is the space between the margin and padding of the box. The border’s height and width provide as its measurements.
Margin Area
The space between the border and the margin makes up this area. The margin-box width and height determine the size of the margin area. Separating the element from its neighbours is helpful. In other terms, the margin is the space between an element and its surrounding elements and the topmost layer of the CSS box model. The margin-box height and width make up its dimensions.
Example :
<!DOCTYPE html>
<html>
<head>
<style>
.C{
margin-left: 50px;
border: 50px solid #ccc;
width: 300px;
height: 200px;
text-align: center;
padding: 25px;
}
.C1 {
font-size: 20px;
font-weight: bold;
color: red;
margin-top: 30px;
background-color: #ccc;
}
.C2 {
font-size: 10px;
font-weight: bold;
background-color: white;
}
</style>
</head>
<body>
<div class="C">
<div class="C1">Codeshruta</div>
<div class="C2">Don't forget to share this blog post.</div> </div>
</body>
</html>
Elements width and height
We must understand how the CSS Box model functions in order to specify the width and height properties of an element. Only the content area’s width and height have been set while using CSS to set an element’s width and height properties. To get an element’s complete size, we must include padding, borders, and margins. Consider the example below.
div {
width: 100px;
height: 300px;
margin: 0;
border: 2px solid black;
padding: 10px;
}
Total width = 100px + 10px + 10px + 2px + 2px + 0px + 0px
Total width = 124px
Similarly,
Total height = 300px + 10px + 10px + 2px + 2px + 0px + 0px
Total height = 324pxThe element’s overall width and height can be computed as follows:
Total element width = width + left padding + right padding + left border + right border + left margin + right margin
Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
Conclusion
One of the fundamentals of website creation is the CSS box model. Understanding this concept will help you make more complicated layouts and better align pieces with one another. I hope after reading this blog post you have cleared all the doubts about the CSS Box Model. If you have any questions or problems, then don’t forget to comment below.
Thankyou for reading!
Written by : Vipin
Hi, always i useed too cherck blog pists here inn thhe eardly houes inn thee daylight, sincee
i like tto gaikn knowledge of moore and more.