<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒模型</title>
<style>
/*
width 宽度
height 高度
padding 内边距
-padding-top
-padding-right
-padding-bottom
-padding-left
border 边框的宽度
-border-top
-border-right
-border-bottom
-border-left
margin 外边距
-margin-top
-margin-right
-margin-bottom
-margin-left
5px 上右下左, 等同于5px 5px 5px 5px
5px 10px 15px 20px; 上 右 下 左
5px 5px; 上下 左右
5px 20px 10px; 上 左右 下
盒子的宽度
width + padding-left + padding-right + border-left + border-right
盒子的高度
height + padding-top + padding-bottom + border-top + border-bottom
*/
* {
margin: 0;
padding: 0;
}
.box1 {
/*display: table;
word-spacing: -1em;*/
}
.box1 div {
display: inline-block;
width: 100px;
height: 100px;
border: 10px solid red;
padding: 15px 10px 20px;
/*margin: 10px;*/
margin: 5px 10px 15px 20px;
/*margin-left: 5px;
margin-right: 5px;*/
}
.box2 {
width: 200px;
height: 100px;
/*文本居中*/
text-align: center;
/*容器居中*/
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box1">
<div></div>
<div></div>
</div>
<div class="box2">
今天做核酸
</div>
</body>
</html>上述运行结果：
1880
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
