「网易官方」极客战记（codecombat）攻略-网页开发2-边际效用-marginal-utility

(点击图片进入关卡)

边距和填充用于分离内容。

简介

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>

 

本攻略发于极客战记官方教学栏目，原文地址为：

https://codecombat.163.com/news/jikezhanji-bianjixiaoyong

极客战记——学编程，用玩的！