The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.
In CSS Box Model, every HTML element is considered as a rectangular box. That box can have content ( width & height ), margin, padding and border.
1. Content -
The content of the box, where text and images appear. it gives the Width and Height of a box. The default width is auto for block and inline-level elements. For block level, width auto means 100% of content space, and for inline, width is equal to the content of the element. content-box is the area of content available inside the box.
Units for width and height are px, em, and %.
2. Padding - Padding is used to give space inside an element. Padding inherits the background color of the content.
we can also set padding-top, padding-right, padding-bottom and padding-left. Clears an area around the content. The padding is transparent.
Padding units are px, em and %.
3. Border - CSS border is used to give a visible outline around an element. The border comes between the Margin and the Padding. Borders can have different styles, colors and widths. There are three types of border Properties: A border that goes around the padding and content.
1) Border style:- is the most important property in all three. Without border style, the border will not work. Common border styles are:
solid, dashed, dotted, double and none.
2)border width:- A border can have a width in px or em. Normally we use border width in pixels. The default border width is 3px and color is inherited from font color.
3)border-color:-Border can have border color using the border-color property.
We can use any color by name, hexadecimal color code, or RGB color code. The default border color is inherited from the font color.
4. Margin - Margin is used to give space outside an element. The margin background color is transparent. Margin value can be positive or negative.
Margin units are px, %, em and auto. margin auto is used to align a block element in middle. Clears an area outside the border. The margin is transparent.
these are the basic properties of the CSS box model.