Skip to content

CSS Box Model

The Box Model

  • Content box
  • Padding box
  • Border box
  • Margin box

Pasted image 20211209100324.png

Example:

  • 400 width
  • 30 padding-left
  • 30 padding-right
  • 20 border-left
  • 20 border-right
  • 500px total width

Element height and width calculation

Final element width = left border + left padding + width + right padding + right border

Final element height = top border + top padding + height + bottom padding + bottom border

Box Properties

  • Width
  • Height
  • Padding
  • Margin
  • Boarder

Width and Height

The width and height properties change the size of the content box. Inline elements require the display property. 

/* Block element */  
div {  
  width: 100px;  
  height: 100px;  
}  

/* inline-element */  
span {  
  width: 100px;  
  height: 100px;  
  display: block;  
  /* OR */  
  display: inline-block;  
}

Padding

Padding adds/removes space inside of the element but around the content box. 

/* Longhand */  
padding-top: 2px;  
padding-right: 2px;  
padding-bottom: 2px;  
padding-left: 2px;  

/* shorthand */  
padding: 2px 2px 2px 2px; /* top right bottom left */  

/* The shorthand syntax can use 1-4 values. */  
padding: 2px; /* same on all sides */  
padding: 2px 10px; /* top & bottom, right & left */  
padding: 2px 10px 5px; /* top, right & left, bottom */  
padding: 2px 10px 5px 2px; /* top, right, bottom, left */  

/* You can also mix different types of length units. */  
padding: 10px 2%; /* top & bottom, right & left */  

/* valid */  
padding: 0px;  
padding: 0;  
padding: 2px 0;  

/* not valid */  
padding: 2;  
padding: -10;

Margin

Margin adds/removes space around the element. 

/* longhand */  

margin-top: 2px;  
margin-right: 2px;  
margin-bottom: 2px;  
margin-left: 2px;  

/* shorthand */  
margin: 2px 2px 2px 2px; /* top right bottom left */  
margin: 2px 10px 5px; /* top, right & left, bottom */  
margin: 2px 10px; /* top & bottom, right & left +*/  
margin: 2px; /* same on all sides */

Border

The border property displays a border between the margin and padding. 

/* shorthand */  
border: 2px solid red;  

/* longhand */  
border-width: 2px;  
border-style: solid;  
border-color: red;  

/* width */  
border-width: 10px;  
border-width: thin;  
border-width: medium;  
border-width: thick;  

/* color */  
border-color: blue;  
border-color: #000000;  

/* style */  
border-style: none;  
border-style: hidden;  
border-style: dotted;  
border-style: dashed;  
border-style: solid;  
border-style: double;  
border-style: groove;  
border-style: ridge;  
border-style: inset;  
border-style: outset;
Last update : August 14, 2023
Created : August 25, 2022

Comments

Comments