CSS入门

内边距(padding)与外边距(margin)

此课程是收费课程,请先购买或加入会员后再访问。

关于内外边距的概念,大家先来看个东西。

padding(内边距)

大家一起看,相框之中,有一张相片。这个相片,也是就网页中元素的大小。它的相框就是咱们之前所学习的border(边框)。至于相框与相片之间的间距,这个呢,我们就叫它padding(内边距)。两个相框之间的间距呢,这个就是margin(外边距)了。这个相框,我们用代码来表示一下。

CSS的padding与margin

<html>
<head>
    <meta charset="utf-8">

    <style>
        .picture {
            border: 5px solid #1f99b0;
            float: left;
            padding: 20px;
        }
    </style>
</head>

<body>
<div class="picture">
    <img src="html.jpg">
</div>
</body>
</html>

padding内边距

padding,就是内边距了。也就是咱们刚才看到的相框与相片之间的间距了。这个概念挺简单的吧?通过chrome检查工具,也可以直接看到内边距的大小是多少。这里绿色的部分,就是padding内边距,我们将它的四个方向全部设置成了20px

四个方向的 padding

如果你想每个方向,定义不同大小的内边距,这当然也可以的。

.picture {
    /* ... */

    padding-top: 20px;
    padding-right: 50px;
    padding-bottom: 100px;
    padding-left: 80px;
}

padding内边距

padding 缩写大法

这样,每个方向的内边距,就都不同了。这种写法,是正确的,但有点太啰嗦了。更简化的写法,是按照顺时针规则来写。请大家牢记口诀,就是上右下左

缩写成一行

.picture {
    /* ... */

    padding: 20px 50px 100px 80px;
}

刷新一下,效果呢,和刚才是一模一样的。这里我们进一步修改padding

.picture {
    /* ... */

    padding: 20px 50px;
}

如果我们只写两个值,那又会怎样呢?还是按照顺时针的顺序来,上面就是20px,右边是50px。下面没有值,浏览器就默认的把下边距设置的和上边距一样。这样也是20px了。左边也没有设置,也会默认和右边一样,50px

思考

现在大家思考一个问题,我如果再加一个100px。根据刚才的我们说的规则,请问现在上下左右,4个方向的内边距,到底都是多少呢?

.picture {
    /* ... */

    padding: 20px 50px 100px;
}

三个方向的padding

外边距

内边距明白了,我们一起再看看外边距。现在有两个相框了,所谓的外边距,那其实就是两个相框之间的距离。用代码这样表示,margin

<html>
<head>
    <meta charset="utf-8">

    <style>
        .picture {
            border: 5px solid #1f99b0;
            float: left;
            padding: 20px;
            margin-right: 50px;
        }
    </style>
</head>

<body>
<div class="picture">
    <img src="html.jpg">
</div>

<div class="picture">
    <img src="css.jpg">
</div>
</body>
</html>

margin外边距

写了一个右边距,50px,这样再刷新,就看到两个相框之间的50px间距了。是不是非常好懂?
如果每个方向的外边距不一样,你可以一个个方向的写。当然一样也可以用刚才介绍的缩写大法,还是按照顺时针上右下左来书写。

这一章介绍给大家的,也就这么多了。学会了浮动内、外边距,咱们的CSS技术,就算摸到门槛了。


现在就注册ITFun.tv会员
持续关注IT界最新技术,随时更新相关课程。在线学习IT课程或直接报名参加线下武汉PHP、Web前端培训。

仅仅30秒钟就可以简单注册

会员注册(免费)
×