2.2.8盒子模型
content: 内容
Padding: 内边距
Border 边框
Margin:外边距
Padding :100px 表示上下左右 4个方向都增加了100px
Padding: 100px 200px 表示的是 上下 、左右
padding: 100px 200px 300px; 上、左右、下
padding: 100px 200px 300px 400px;上、右、下、左
注:margin方向的用法和padding相同
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body,div{
padding: 0;
margin: 0;
}
#one{
width: 100px;
height: 100px;
background-color: red;
border: 10px solid black;
padding: 100px;/*内边距*/
margin: 100px auto;/*外边距 auto表示居中一般用于margin(外边距)*/
}
#main{
width: 1000px;
height: 1000px;
border: 1px solid black;
background-color: blue;
}
</style>
</head>
<body>
<div id="main">
<div id="one">盒子1</div>
<div id="one">盒子2</div>
</div>
</body>
</html>