内外边距
CSS margin（外边距）可以让元素产生间隔，而不会显得拥挤；padding（内边距，也叫填充距）用来产生合理的留白，margin在元素盒子border的外边，padding在border的里面
外边距margin
外边距margin可以撑开元素之间的距离，设置合理的外边距可以让页面布局显得更美观。外边距的复合属性是margin：top right bottom left；代表四个方向的距离。只有三个值的时候margin：top left/right bottom；中间值代表左右的值。只有两个值的时候：margin：top/bottom left/right；第一个值代表上下间距，第二个值代表左右边距。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
<style>
*{margin: 0;padding: 0;box-sizing: border-box;}
body{background-color: lightcyan;}
.container{width: 100px;height: 100px; background-color: rgba(255, 0, 0, 0.75);text-align: center;line-height: 100px;}
</style>
</head>
<body>
<div class="container" style="margin: 15px 20px;">Hello World</div><!--margin设置外边距-->
<div class="container" style="margin: 30px 40px 15px;">Hello World</div>
<div class="container" style="margin: 30px 40px 15px 50px;">Hello World</div>
<div class="container" style="margin-left:20px;">Hello World</div>
</body>
</html>
margin:20px 30px;设置外边距，当只有两个值时，第一个表示上下边距，第二个表示左右。三个值时第二个表示左右边距，一三表示上下边距。也可以单独设置某一边的距离，比如margin-left设置左边距。
margin属性
| 属性 | 描述 |
|---|---|
| margin | 简写属性。在一个声明中设置所有外边距属性。 |
| margin-bottom | 设置元素的下外边距。 |
| margin-left | 设置元素的左外边距。 |
| margin-right | 设置元素的右外边距。 |
| margin-top | 设置元素的上外边距。 |
内边距padding
内边距padding的设置和外边距一样，内边距是为了撑开边框和内容的距离，合理的设置内边距显得内容更协调。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
<style>
*{margin: 0;padding: 0;box-sizing: border-box;}
body{background-color: lightcyan;}
.container{width: 100px;height: 100px; background-color: rgba(255, 0, 0, 0.75);text-align: center;}
</style>
</head>
<body>
<div class="container" style="padding: 15px 20px;">Hello World</div><!--padding设置内边距-->
<div class="container" style="padding: 30px 40px 15px;">Hello World</div>
<div class="container" style="padding: 30px 40px 15px 50px;">Hello World</div>
<div class="container" style="padding-left: 20px;">Hello World</div>
</body>
</html>
内边距和外边距使用一样。内边距位于border内，content外。外边距位于border外，outline内。
padding属性
| 属性 | 说明 |
|---|---|
| padding | 使用简写属性设置在一个声明中的所有填充属性 |
| padding-bottom | 设置元素的底部填充 |
| padding-left | 设置元素的左部填充 |
| padding-right | 设置元素的右部填充 |
| padding-top | 设置元素的顶部填充 |
盒模型图
css盒模型
网友评论