The CSS box model is the combined position of borders, margins, padding, and elements or content around HTML elements. Box model properties define border, margin, padding, or outline around any content.
Parts of the CSS Box Model
Margin - The margin is defined as the space around the border. No color can be used on the surface or background of the margin, it is completely transparent.
Let's begin by seeing the properties:
margin-left: x;
margin-right: x;
margin-top: x;
margin-bottom: x;
margin: x ?y ?z ?w
where x,y,z,w can have the values of px|rem|%|vw|vh.
margin is shorthand for all the 4 above margin properties. It goes clockwise starting from the top element if you add all 4 of the values. If you just add x,y the the margin of x will be applied on top and bottom of the element and the margin of y will be applied to the left and right of the element. If only x is applied the the margin will be applied to all 4 sides.
Examples
margin:20px
Border - The border is located around the content padding, that is, between the margins and the padding. The color of the surface or background influences the border.
Padding- The space around the content is determined using padding. No color can be used on the padding surface or background, it is completely transparent.
Content Itself- Any content in the box model is text, images, etc., which are displayed on the web page.
There are four padding properties,
padding-top
padding-right
padding-bottom
padding-left
All the padding properties can be changed independently or a short hand padding property can be used to change all the values at once.
Short hand properties syntax:
padding: padding-top padding-right padding-bottom padding-left;
Example
Content Itself - Any content in the box model is text, images, etc., which are displayed on the web page.
Box Model: Width and Height
Everything in CSS is a box. Those boxes have different properties. The browser treats everything on a web page as a box, even though the item may not look like a box.
The width of the CSS property sets an elements width.
The height of the CSS property sets an elements height.
div {
width: 350px;
height: 150px;
}
Box Model: Border and Border-Radius
Borders are important because they can make clear what certain things do, or bring attention to certain elements. Borders can change when they are interacted with.
Border Properties
Border-width
Controls the thickness of the border.
Border-Color
Controls the color of the border
Border-Style
Controls the line style - dashed, solid
Example
Box-Model: Padding
Padding Properties
Individual properties
Padding-Left
Padding-Right
Padding-Bottom
Padding-Top
shorthand properties is where you can set all foursides at once.
Box-shadow
The box-shadow property adds a shadow effect to an element. This shadow is a box in itself –although it doesn't occupy any space–, and contrary to the outline's behavior, it goes under the content/elements in the box model instead of on top.
The visualization of the box-shadow is also interesting because it will start from the border, but which edge of the border depends on the type of shadow: drop shadows (default) grow from the border edge (the outer edge of the border), while inset shadows grow from the padding edge (the inner edge of the border).
Example
Wrap Up
Great! Now we know what CSS Box Model is and why it is so useful for aligning HTML elements in our web pages.
We got a good grasp of the differences between the Content Box Model & Border Box Model.