Heading

How the rectangular boxes are laid out on a web page is described by. Every box has a content area and optional surrounding padding, border, and margin areas and each of them can have different properties and can interact differently with each other .

The use of CSS box model is to understand the layout and web page design better.

The content edge, padding edge, border edge, and margin edge are the edges which are four areas of box in CSS.

1-The content area, contains the "real" content of the element, such as text, an image, or a video player bounded by the content edge . It has dimensions which are the content box width and the content-box height. It also has a background color or background image.If the box-sizing property is set to content- box (default) and if the element is a block element, the content area's size can be defined with the properties like width, min-width, max-width, height, min-height, and max-height.

2-The padding area, extends the content area to include the element's padding bounded by the padding edge. The padding-box width and the padding-box height are the dimensions of the padding area. Properties like the padding-top, padding-right, padding-bottom, padding-left, and shorthand padding determines the thickness of padding .

3-The border area, extends the padding area to include the element's borders bounded by the border edge. The border-box width and the border-box height are the dimensions of border area.The thickness of the borders are determined by the border-width and shorthand border properties. The border area's size can be explicitly defined with the width, min-width, max-width, height, min-height, and max-height Properties,if the box-sizing property is set to border-box. When there is a background i.e. nothing but background-color or background-image set on a box, it extends to the outer edge of the border.With the background-clip css property this default behavior can be altered.

4-The margin extends the border area to include an empty area used to separate the element from its neighbors bounded by the margin edge. The margin-box width and the margin-box height are the dimensions of margin area. Properties like the margin-top, margin-right, margin-bottom, margin-left, and shorthand determines margin size of the margin area. The margin area is not clearly defined when margin collapsing occurs, since margins are shared between boxes.

The style, color, and width of an outline are specified by CSS Outline properties .

1-Outline Style The style of the Outline is specified by Outline style property. This property can have one of the following values:
dotted - Defines a dotted outline
dashed - Defines a dashed outline
solid - Defines a solid outline
double - Defines a double outline
groove - Defines a 3D grooved outline. The effect depends on the outline-color value
ridge - Defines a 3D ridged outline. The effect depends on the outline-color value
inset - Defines a 3D inset outline. The effect depends on the outline-color value
outset - Defines a 3D outset outline. The effect depends on the outline-color value
none - Defines no outline
hidden - Defines a hidden outline

2-Outline Color The color of the outline is set by outline-color property. The color can be set by:
name - specify a color name, like "red" RGB - specify a RGB value, like "rgb(255,0,0)"
Hex - specify a hex value, like "#ff0000"
invert - Confirm that the outline is visible, regardless of color background. Performs a color inversion

3-Outline Width The width of the outline is specified by outline width property.
The width can be set in px, pt, cm, em, etc. or by using one of the three pre-defined values: thin, medium, or thick.

4-Outline - Shorthand property All the individual outline properties can be specified in one property to shorten the code.
The outline property is a shorthand property for the following individual outline properties: outline-width outline-style (required) outline-color