(点击图片进入关卡)
边距和填充用于分离内容。
简介
margin 和 padding 用于在元素和其他元素之间以及元素内创建空白。
div {
padding: 30px;
margin: 30px;
}
默认代码
<!-- 边距和填充用于布局元素。 -->
<!-- 边距是元素之间的空间。 -->
<!-- 填充是内容和…之间的距离。 -->
<!-- …元素的边界。 -->
<style>
body {
text-align:center;
}
img {
border:1px black solid;
}
.paddedImage {
/* 填充是内容和边界之间的空间。 */
padding:30px;
}
.marginImage {
/* 边距是元素之间的空间。 */
margin:30px;
}
div {
border:1px black solid;
/* 将边距属性添加到所有div元素： */
/* 将填充属性添加到所有div元素： */
}
</style>
<img class="paddedImage" src=
"http://direct.codecombat.com/file/db/thang.type/54eb540b49fa2d5c905ddf1a/portrait.png"/>
<img class="paddedImage" src=
"http://direct.codecombat.com/file/db/thang.type/54eb540b49fa2d5c905ddf1a/portrait.png"/>
<img class="paddedImage" src=
"http://direct.codecombat.com/file/db/thang.type/54eb540b49fa2d5c905ddf1a/portrait.png"/>
<img class="marginImage" src=
"http://direct.codecombat.com/file/db/thang.type/578691f9bd31c1440083251d/portrait.png"/>
<img class="marginImage" src=
"http://direct.codecombat.com/file/db/thang.type/578691f9bd31c1440083251d/portrait.png"/>
<img class="marginImage" src=
"http://direct.codecombat.com/file/db/thang.type/578691f9bd31c1440083251d/portrait.png"/>
<div>
我是一个div！
</div>
<div>
我也是。
</div>
<div>
别忘了我！
</div>
概览
边距
margin 用来增加元素之间的空间。如果运用的话，就会发生在 border 之外。
.spacedDivs {
margin: 300px;
}
填充
padding 用于增加元素内部和元素的边界之间的空间。如果运用的话，就会发生在 border 内。
.paddedDivs {
padding: 300px;
}
边际效用 解法
<!-- 边距和填充用于布局元素。 -->
<!-- 边距是元素之间的空间。 -->
<!-- 填充是内容和…之间的距离。 -->
<!-- …元素的边界。 -->
<style>
body {
text-align:center;
}
img {
border:1px black solid;
}
.paddedImage {
/* 填充是内容和边界之间的空间。 */
padding:30px;
}
.marginImage {
/* 边距是元素之间的空间。 */
margin:30px;
}
div {
border:1px black solid;
/* 将边距属性添加到所有div元素： */
margin:30px;
/* 将填充属性添加到所有div元素： */
padding:30px;
}
</style>
<img class="paddedImage" src=
"http://direct.codecombat.com/file/db/thang.type/54eb540b49fa2d5c905ddf1a/portrait.png"/>
<img class="paddedImage" src=
"http://direct.codecombat.com/file/db/thang.type/54eb540b49fa2d5c905ddf1a/portrait.png"/>
<img class="paddedImage" src=
"http://direct.codecombat.com/file/db/thang.type/54eb540b49fa2d5c905ddf1a/portrait.png"/>
<img class="marginImage" src=
"http://direct.codecombat.com/file/db/thang.type/578691f9bd31c1440083251d/portrait.png"/>
<img class="marginImage" src=
"http://direct.codecombat.com/file/db/thang.type/578691f9bd31c1440083251d/portrait.png"/>
<img class="marginImage" src=
"http://direct.codecombat.com/file/db/thang.type/578691f9bd31c1440083251d/portrait.png"/>
<div>
我是一个div！
</div>
<div>
我也是。
</div>
<div>
别忘了我！
</div>