CSS Box Model

Every HTML element that can be displayed is considered as a box. In CSS, the term 'box model' is used to represent border, padding and margin of the HTML element. The image below illustrates the box model:

Let us discuss all these 3 properties (border, margin, padding) of box model in detail.

Ad:

CSS Border Property

The CSS border property allow you to define the border style, border width, and border color of an HTML element.

border-width: specifies the width of the four borders. The width can be specified in px, pt, cm, em, etc. or by using one of the three pre-defined values: thin, medium, or thick.
border-style: specifies what kind of border to display. The border can have a predefined style like, solid, double, dotted, dashed, groove, ridge, inset, outset, none, or hidden.
border-color: is used to set the color of the four borders. The color can be set by color name, like "red", Hexa code, like "#ff0000", by RGB value, like "rgb(255,0,0)" or transparent.

CSS Border Property	Description	Syntax
border-width	Specify the width of border.	border-width: 5px; border-width: thin \| medium \| thick;
border-style	Specify the style(type) of border.	border-style: solid \| dotted \| dashed \| double \| groove \| ridge \| inset \| outset;
border-color	Specifies the border color.	border-color: blue
All above 3 properties in one line	border: 8px ridge red;
One-side border		border-top:5px solid green; border-bottom: 8px grove orange; border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left-style: solid; border-style: dotted solid double; /* top, left right, bottom / border-style: dotted solid double dashed; / top,right, bottom, left */

Ad:

CSS Padding Property

CSS Padding property is used to specify the spacing between the border and the content, i.e. inside the container. Padding property may change the height and width of the element.

CSS Padding Property	Description
padding:50px;	Set equal padding from all four sides
padding:10px 50px;	top&bottom:10px (length), left&right:50px (breadth)
padding:10px 30px 50px;	top:10px, left&right:30px, and bottom:50px
padding:10px 20px 30px 40px;	Set all 4 sides padding in one line.(top,right,bottom,left)
padding-top:10px; padding-bottom:20px; padding-left:30px; padding-right:40px;	You can mention padding differently

CSS Margin Property

CSS Margin property is used to specify the spacing outside the container.

CSS Margin Property	Description
margin:50px;	Set equal margin from all four sides
margin:10px 50px;	top&bottom:10px (length), left&right:50px (breadth)
margin:10px 30px 50px;	top:10px, left&right:30px, and bottom:50px
margin:10px 20px 30px 40px;	Set all 4 sides margin in one line.(top,right,bottom,left)
margin-top:10px; margin-bottom:20px; margin-left:30px; margin-right:40px;	You can mention margin differently

Note: Body have a default margin. To remove body margin: Set body margin as 0px.

Note: Value of Margin can be positive as well as negative, but padding value is always positive, as it does not support negative value.

Ad: