<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内外边距</title>
<style>
body{
margin:0;
}
.box{
width: 100px;
height: 100px;
border:1px solid red;
}
.box2{
width: 100px;
height: 100px;
border:1px solid green;
margin:20px;
margin:20px 40px;
margin:20px 40px 50px;
margin:20px 40px 50px 70px;
margin:10px auto;
margin-left: auto;
margin-right:auto; /* 水平居中 推荐写法*/
padding:20px;
}
.box3{
width: 100px;
height: 100px;
border:1px solid blue;
}
</style>
</head>
<body>
<!--
外边距 标签与标签之间的距离
margin:10px 上下左右均为10px
margin:10px 20px 上下10px 左右20px
margin:10px 20px 30px 上10px 左右20px 下30px
margin:10px 20px 30px 40px 上10px 右20px 下30px 左40px
内边距 标签与标签内容之间的距离
padding:10px 上下左右均为10px
padding:10px 20px 上下10px 左右20px
padding:10px 20px 30px 上10px 左右20px 下30px
padding:10px 20px 30px 40px 上10px 右20px 下30px 左40px
整个div的宽高 仅仅是内容的宽高, 设置padding, div的宽高不变, 视觉上会放大
-->
<div class='box'></div>
<div class='box2'></div>
<div class='box3'></div>
</body>
</html>
内外边距水平居中
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- CSS设置行内元素的水平居中div{text-align:center} /DIV内的行内元素均会水平居中/ CS...
- Original2016-12-06溦梦溦时光 今天是一位特殊读者的生日，一年365天中最重要的一天。 你可能不认...
