What is The Box Model?
The CSS box model is the foundation of responsive design. It helps you create websites that look good on any screen size.
The CSS box model defines every element’s width, height, and position on a web page.
The CSS box model allows you to control the spacing between elements on a page.
The CSS box model allows you to create custom margins and borders for your elements.
The CSS box model is essential for creating correctly-aligned websites. Mastering the CSS box model will help you build better websites faster and easier.
Every box is composed of four parts (or areas), defined by their respective edges: the content, padding, border, and margin.
Content:
The content area, bounded by the content edge, contains the “real” content of the element, such as text, an image, or a video player. Its dimensions are the content width (or content-box width) and the content height (or content-box height). It often has a background color or background image.
Padding:
The padding area, bounded by the padding edge, extends the content area to include the element’s padding. The thickness of the padding is determined by the padding-top, padding-right, padding-bottom, padding-left and shorthand padding properties.
Border:
The border area, bounded by the border edge, extends the padding area to include the element’s borders. The thickness of the borders are determined by the border-width and shorthand border properties.
Margin:
The margin area, bounded by the margin edge, extends the border area to include an empty area used to separate the element from its neighbors. The size of the margin area is determined by the margin-top, margin-right, margin-bottom, margin-left, and shorthand margin properties.
Width and Height of a box
.box{
width: 100px;
height: 100px;
padding: 10px;
border: 2px solid #000;
margin: 0;
}
The total width of an element should be calculated like this:
Total element width = width + left padding + right padding + left border + right border + left margin + right margin.
For the box, the total width is: 100+10+10+2+2+0+0=124px
The total height of an element should be calculated like this:
Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin.
For the box, the total height is: 100+10+10+2+2+0+0=124px
Thank you