Contents of this chapter
1. Mission objectives
The previous article introduced the margin, which is the distance between an element and adjacent elements.
This article introduces inner margins. As the name suggests, inner margins refer to the content inside the element and the distance from the edge of the element
2. Default
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="box">
君不见黄河之水天上来
奔流到海不复回
</div>
</body>
</html>
The effect is as follows:
3. Padding
We can use padding-top, padding-right, padding-bottom, padding-left, respectively to set the top, right, bottom, and outer margins of the element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 300px;
height: 300px;
border: 1px solid black;
padding-top: 30px;
padding-left: 15px;
padding-right: 15px;
}
</style>
</head>
<body>
<div class="box">
君不见黄河之水天上来
奔流到海不复回
</div>
</body>
</html>
The effect is as follows
4. Summary
The use of inner and outer margins is very frequent, so we must use the inner and outer margins reasonably and proficiently to achieve better results.