CSS Box Model

The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model: Explanation of the different parts: Content – The content of the box, where text and images appear. Padding – Clears an area around the content.

Code sample

div {
  width: 300px;
  padding: 25px;
  border: 25px solid navy;
  margin: 25px;
}

Terry White

Terry White is a professional Drupal & WordPress developer, Web developer, Web designer, Software Engineer, and Blogger. He strives for pixel-perfect design, clean robust code, and a user-friendly interface. If you have a project in mind and like his work, feel free to contact him

View all posts by Terry White →