In the process of web design, the padding of elements is often indispensable. Today, I will briefly introduce padding.
Padding is the padding of the element, which is often used on the box model (div).
A box model is divided into 4 directions of upper, right, lower and left, and the same padding is also divided into 4 directions of upper, right, lower and left, which are:
padding-top、padding-right、padding-bottom、padding-left
The following is explained with an example:
1. First, let's look at the basic style when the padding attribute is not set:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Padding</title>
<style>
.container{
border: 2px solid pink;
background: #C71585;
width:200px;
height:200px;
}
.box{
border:3px solid blue;
background:#FFC0CB;
height:150px;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
The operation effect is shown in the following figure:
From the above image we can see that the outer container contains the inner box. We can see that the inner box is tightly attached to the outer container.
Next we complete a small problem:
Problem: The top border of the inner box should be 10px away from the top border of the outer container.
Analysis: We need to use the padding-top property to set it. The code and effect are shown in the following figure:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>padding-top</title>
<style>
.container{
border: 2px solid pink;
background: #C71585;
width:200px;
height:200px;
padding-top:10px;
}
.box{
border:3px solid blue;
background:#FFC0CB;
height:150px;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
Running effect:
From the final running effect, we can see that there is indeed a 10px gap between the top of the inner box and the outer container, but the outer container has become higher, and the higher part is exactly the padding-top we set. size.
Conclusion: padding will enlarge the total width and height of the original element. If you want to ensure that the total width and height of the original element remain unchanged, you need to adjust the value of the width and height of the element itself after setting the padding.
Element (box model) total width = border-left + border-right + padding-left + padding-right + width
Element (box model) total height = border-top + border-bottom + padding-top + padding-bottom + height
2. The padding attribute conforms to: padding.
Padding contains four directions, namely top, right, bottom, and left. We can define these four values separately, of course, we can also combine them, as shown below:
| padding value | top value | right value | bottom value | left value | Summarize |
| padding:10px; | 10px | 10px | 10px | 10px | 4 directions have the same value |
| padding:10px 15px; | 10px | 15px | 10px | 15px | First value: up and down Second value: left and right |
| padding:10px 5px 20px; | 10px | 5px | 20px | 5px | first value: up Second value: left and right third value: down |
| padding:10px 5px 15px 20px; | 10px | 5px | 15px | 20px | first value: up Second value: right third value: down Fourth value: left |
This is the introduction of padding, will you be confused? Get your hands on it, write it, and read it.