Intro
The CSS box model is a container that contains multiple properties including borders, margins, padding, and the content itself. It is used to create the design and layout of web pages. According to the CSS box model, the web browser supplies each element as a square prism.
Use of the box model
The box modal is also used to set the height and width of an element correctly
Properties of the Box Model
Content:- The content area consists of images, text, or other media content. The height and width properties help to modify the box dimensions.
Padding:- The padding area is the space around the content area and within the border box. It can be applied to all sides of the box or the specific, selected side(s) - top, right, bottom, and/or left.
Border:- The border area surrounds the padding and the content, and can be applied to all the sides of the box or selected side(s) - top, right, bottom, and/or left.
Margin:- The margin area consists of the space between the border and the margin. The margin does not possess its own and is completely transparent. It shows the background color of the element, like the body element.
Example
Padding
You can see that the second p tag has some padding on the right and left side padding is inside of the div so this is a padding example
Border
In this border example, you see that some border in the p tag and some border pixels give and border look like the above result
Margin
In this example, on both sides of the p tag, some margin provide right left top to bottom so the margin provide space outside of the p tag