您的位置：首页 > 其它

padding,border,margin的区别

2014-10-20 11:03 288 查看

翻了一些资料，自己又写了写，算是做到了简单的区分。

先copy一张图过来，这张3d图很有直观的看到了三者的区别。padding是层内的，边框以内的；border是边框；margin是边框以外的。接下来，就是自己写代码熟悉一下了。

1、先写一个最简单的文档，背景为蓝，只有一句话，这句话背景为白色。接下来就可以试验了。

<body>

<style type="text/css">

body{

background :#2594e3;

}

p{

width: 400px;

background :#fff;

}

</style>

<p>This is a test for margin, padding, and border</p>

</body>

2、添加padding，查看padding是如何作用于边框之内的。

<body>

<style type="text/css">

body{

background :#2594e3;

}

p{

width: 400px;

background :#fff;

padding-top :20px;

}

</style>

<p>This is a test for margin, padding, and border</p>

</body>

很明显，文字（content）距离上面远了，但是就整个层而言，位置其实是没有变化的

3、添加border，查看border如何增大了边框

<body>

<style type="text/css">

body{

background :#2594e3;

}

p{

width: 400px;

background :#fff;

border :10px solid #fff000;

}

</style>

<p>This is a test for margin, padding, and border</p>

</body>

4、查看margin是如何影响边框以外的距离的。

<body>

<style type="text/css">

body{

background :#2594e3;

}

p{

width: 400px;

background :#fff;

margin-top :200px;

}

</style>

<p>This is a test for margin, padding, and border</p>

</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航