Working with padding in CSS
Let's say we set the width of some element to 100px. In CSS, this does not mean that the element will actually be 100px wide. The point is that adding padding expands the element and it becomes larger than specified in the width property.
Let's look at an example. Let's make two blocks, and set their width to 100 pixels. At the same time, we'll set the second block to padding, but not the first one. As a result, the second block will be larger by the size of the padding:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
width: 100px;
height: 100px;
background: #f1f1f1;
margin-bottom: 20px;
}
#elem2 {
padding: 25px; /* set indents */
width: 100px;
height: 100px;
background: #f1f1f1;
}
:
