Height
By default, it sets the content area height of the element.If box-sizing is set to border-box, however, it instead determines the height of the border area.
/* <length> values */
height: 120px;
height: 10em;
height: 100vh;
/* <percentage> value */
height: 75%;
/* Keyword values */
height: max-content;
height: min-content;
height: fit-content(20em);
height: auto;
/* Global values */
height: inherit;
height: initial;
height: revert;
height: revert-layer;
height: unset;
Width
By default, it sets the content area width of the element. if box-sizing is set to border-box, which sets the width of the border area.
/* <length> values */
width: 300px;
width: 25em;
/* <percentage> value */
width: 75%;
/* Keyword values */
width: max-content;
width: min-content;
width: fit-content(20em);
width: auto;
/* Global values */
width: inherit;
width: initial;
width: revert;
width: revert-layer;
width: unset;
Border
It is used to set an element border or can be said to set an outline for the element.
The border is the shorthand used to set :
Border-width: It sets the thickness of the border.Border-style: It sets the style of the border.
Border-color: Sets the colour of the border.
/* style */
border: solid;
/* width | style */
border: 2px dotted;
/* style | color */
border: outset #f33;
/* width | style | color */
border: medium dashed green;
Padding
An element's padding area is the space between its content and its border.
The padding is the shorthand used to set :
padding-top: provides padding to the top.padding-right: provides padding to the right.padding-left: provide padding to the left.padding-bottom: provide padding to the bottom.
padding: 5%; /* All sides: 5% padding */
padding: 10px; /* All sides: 10px padding */
padding: 10px 20px; /* top and bottom: 10px padding */
/* left and right: 20px padding */
padding: 10px 3% 20px; /* top: 10px padding */
/* left and right: 3% padding */
/* bottom: 20px padding */
padding: 1em 3px 30px 5px; /* top: 1em padding */
/* right: 3px padding */
/* bottom: 30px padding */
/* left: 5px padding */
Margin
set a margin on all four sides of an element. Margins create extra space around an element, unlike padding, which creates extra space within an element.
The margin is the shorthand used to set :
margin-top: provides padding to the top.margin-right: provides padding to the right.margin-left: provide padding to the left.margin-bottom: provide padding to the bottom.margin: 5%; /* All sides: 5% margin */ margin: 10px; /* All sides: 10px margin */ margin: 1.6em 20px; /* top and bottom: 1.6em margin */ /* left and right: 20px margin */ margin: 10px 3% -1em; /* top: 10px margin */ /* left and right: 3% margin */ /* bottom: -1em margin */ margin: 10px 3px 30px 5px; /* top: 10px margin */ /* right: 3px margin */ /* bottom: 30px margin */ /* left: 5px margin */ margin: 2em auto; /* top and bottom: 2em margin */ /* Box is horizontally centered */ margin: auto; /* top and bottom: 0 margin */ /* Box is horizontally centered */This is the basics of the Box Model. Easy to learn, Easy to apply.