Skip to main content

Box Model: Margins, Edges, and Padding

Box Model: Margins, Edges and Padding

The CSS box model, with its margins, borders, and padding, is fundamental to web page design. Every element on the page is a box consisting of margins, borders, padding, and the content itself.

Margins​

Margins are the space around an element. They can be defined for each side of the element (top, right, bottom, left).

margin: Defines the margin for all sides.

CSS
p {
  /* Aplica a los cuatro lados */
  margin: 1em;
  margin: -3px;

  /* arriba y abajo | izquierda y derecha */
  margin: 5% auto;

  /* arriba | izquierda y derecha | abajo */
  margin: 1em auto 2em;

  /* arriba | derecha | abajo | izquierda */
  margin: 2px 1em 0 auto;
}

Borders​

Borders surround the content and padding of an element.

border: Defines the style, thickness, and color of the border.

CSS
div {
  /* estilo */
  border: solid;

  /* ancho | estilo */
  border: 2px dotted;

  /* estilo | color */
  border: outset #f33;

  /* ancho | estilo | color */
  border: medium dashed green;
}

border-radius: Defines rounded edges.

CSS
div {
  /* La sintaxis del primer radio permite uno a cuatro valores */
  /* El radio se establece para los 4 lados */
  border-radius: 10px;

  /* esquina-superior-izquierda-y-esquina-inferior-derecha | esquina-superior-derecha-y-esquina-inferior-izquierda */
  border-radius: 10px 5%;

  /* esquina-superior-izquierda | esquina-superior-derecha-y-esquina-inferior-izquierda | esquina-inferior-derecha */
  border-radius: 2px 4px 2px;

  /* esquina-superior-izquierda | esquina-superior-derecha | esquina-inferior-derecha | esquina-inferior-izquierda */
  border-radius: 1px 0 3px 4px;

  /* La sintaxis del segundo radio permite uno a cuatro valores */
  /* (valores del primer radio) / radio */
  border-radius: 10px / 20px;

  /* (valores del primer radio) / esquina-superior-izquierda-y-esquina-inferior-derecha | esquina-superior-derecha-y-esquina-inferior-izquierda */
  border-radius: 10px 5% / 20px 30px;

  /* (valores del primer radio) / esquina-superior-izquierda | esquina-superior-derecha-y-esquina-inferior-izquierda | esquina-inferior-derecha */
  border-radius: 10px 5px 2em / 20px 25px 30%;

  /* (valores del primer radio) / esquina-superior-izquierda | esquina-superior-derecha | esquina-inferior-derecha | esquina-inferior-izquierda */
  border-radius: 10px 5% / 20px 25em 30px 35em;
}

Padding​

Padding is the interior space within an element, between the content and the border.

padding: Defines the padding for all sides.

CSS
p {
  padding: 10px;
}

padding-top, padding-right, padding-bottom, padding-left: Define the paddings individually.

CSS
p {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}
Resources
Exercises

💻Get your hands on the code with these simple challenges: