start learning
Image 1

CSS Box Model
Padding, Borders, and Margins

The CSS Box Model is a fundamental concept in web design that describes how elements are structured and spaced within a web page. It consists of three main components: padding, borders, and margins.


The combination of padding, borders, and margins within the CSS Box Model allows designers to control the spacing and layout of elements on a web page. Understanding and manipulating these properties are essential for creating visually appealing and well-structured web layouts.


Padding


div {
  padding: 10px; /* applies 10px padding to all sides */
}

Or


div {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}


Borders


p {
  border: 1px solid black;
}

Test

Margins


h1 {
  margin: 20px; /* applies 20px margin to all sides */
}

Or


h1 {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}

Test

By using these examples, you can adjust the padding, borders, and margins of different elements in your web page to achieve the desired spacing and layout. Remember to customize the values according to your specific design requirements.