CSS Box Model

CSS BOX MODEL

Photo -> CSS box-model 

Contents formatted in HTML file are surrounded by one or more HTML elements. With the CSS selectors you can select any element you want to style.

The default shape of an element is the BOX-MODEL:

  • Content – for example an image or a text. Content/
  • Padding – A transparent area between the content and it’s outer border. Content/Padding
  • Border – A border around the content. Content/Padding/Border
  • Margin – A transparent area around the border. Content/Padding/Border/Margin
Eg

.box_model { margin: 5px; border: 5px; padding: 5px; color: blue; }