CSS-box model and inner and outer margins
Tip: After the article is written, the table of contents can be automatically generated. For how to generate it, please refer to the help document on the right
Article Directory
What is the box model (Box Model)
All HTML elements can be regarded as boxes. In CSS, the term "box model" is used in design and layout.
The CSS box model is essentially a box that encapsulates the surrounding HTML elements, including: margins, borders, padding, and actual content.
The box model allows us to place elements in the space between other elements and the borders of surrounding elements.
The picture below illustrates the Box Model:
Explanation of different parts:
- Margin - Clear the area outside the border, the margin is transparent.
- Border-A border around the inner margin and outside the content.
- Padding-Clear the area around the content, the padding is transparent.
- Content-The content of the box, displaying text and images.
Use of Border
Properties of the border
-
Border thickness
-
Border style
-
Sample color of the border
border:2px solid red;
/*粗细，(solid)实线，颜色*/
/*(dashed)虚线*/
Border test
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框的使用</title>
<style>
#box{
width:300px;
border:2px solid red;
}
h2{
font-size:16px;
background-color:white;
color:red;
}
form{
background:green;
}
div:nth-of-type(1) input{
border:2px solid #FF0011
}
div:nth-of-type(2) input{
border:2px solid #cc00FF
}
div:nth-of-type(3) input{
border:2px dashed #FF00FF /*dashed虚线*/
}
</style>
</head>
<body>
<div id="box">
<h2>会员登录</h2>
<form action="#">
<div>
<span>用户名：</span>
<input type="text">
</div>
<div>
<span>密码：</span>
<input type="text">
</div>
<div>
<span>邮箱：</span>
<input type="text">
</div>
</form>
</div>
</body>
</html>
Border renderings (three different styles of borders)
Outer and inner margins
Properties of Margin
Margin-top
Margin-bottom bottom margin
Margin-left
Margin-right
The role of margin: to
center the element . Requirements for centering: 1. Block element 2. Have a fixed width
Padding (inner margin) properties
padding-top top padding
padding-bottom bottom padding
padding-left padding-left
padding-right padding-right
/*padding:0; 内边距的上下左右都为0
padding:1,2;内边距的上下为1，左右为2
padding:0，1,2,3;内边距的上，左，下，右为0,1,2，3，按顺时针排序
外边距同理
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内外边距</title>
<style>
/*初始化操作*/
body,h2{
/*body总有一个默认的外边距margin=8
在初始化的时候通常将body，h1，ul，li，a等标签的margin设置为0
*/
margin:0;
padding:0;
/*padding:0; 内边距的上下左右都为0
padding:1,2;内边距的上下为1，左右为2
padding:0，1,2,3;内边距的上，左，下，右为0,1,2，3，按顺时针排序
*/
}
#box{
width:300px;
border:2px solid red;
margin:0 auto; /*margin的作用：让元素居中*/
}
h2{
font-size:16px;
background-color:green;
color:red;
}
form{
background:green;
}
input{
border:1px solid black;/*给三个文本框设置样式*/
}
div:nth-of-type(1){
padding:20px 10px;/*设置第一个文本的内边距*/
}
</style>
</head>
<body>
<div id="box">
<h2>会员登录</h2>
<form action="#">
<div>
<span>用户名：</span>
<input type="text">
</div>
<div>
<span>密码：</span>
<input type="text">
</div>
<div>
<span>邮箱：</span>
<input type="text">
</div>
</form>
</div>
</body>
</html>
Effect picture
Supplement: the length of the box model = the outer margin + the length of the border + the inner margin + the length of the content