【零基础学习web前端】CSS中margin和padding的区别

Amy · 发表于 2018-11-30 16:18:30

本帖最后由 Amy 于 2018-11-30 16:20 编辑

【零基础学习web前端】CSS中margin和padding的区别

【零基础学习web前端】教程目录导航 http://www.sufeinet.com/thread-24027-1-1.html

padding是控件的内容相对控件的边缘的边距，即内边框；margin是控件边缘相对父空间的边距，即外边框。
设置margin 那么他所占据的空白地方会是在边框外面
设置padding 他所占据的空白地方是在边框里面。
例：
HTML

[HTML] 纯文本查看 复制代码

<html>
<div class="box">
    <div class="main"></div>
</div>     
<html>

css样式

[CSS] 纯文本查看 复制代码

html{
            background: #bce4ff
        }
        .box{
            width: 200px;
            height: 200px;
            background: #4777de;
            padding:50px;
            margin: 50px;
        }
        .main{
            width: 100%;
            height: 100%;
            background: #fff;
        }

效果：

图解看一下就更清楚了：

提示：

内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。
外边距可以是负值，而且在很多情况下都要使用负值的外边距。

Amy · 发表于 2018-11-30 16:23:09

padding和margin的属性用法可以参看我的这篇文章
http://www.sufeinet.com/thread-24062-1-1.html

范范 · 发表于 2018-11-30 16:28:54

真是难得给力的帖子啊。

范范 · 发表于 2018-11-30 16:29:12

楼主加油，帖子不错，是一系列的，学习喽

竹林风 · 发表于 2018-11-30 16:39:07

很不错的，我会一直关注的，问下，我现在也想学习这块，该准备些什么呢？

竹林风 · 发表于 2018-11-30 16:39:23

楼主加油，我们都看好你哦。

Amy · 发表于 2018-11-30 16:41:57

竹林风发表于 2018-11-30 16:39
很不错的，我会一直关注的，问下，我现在也想学习这块，该准备些什么呢？

可以参考我的这篇文章，然后跟我的文章学，从基础开始，很容易的

http://www.sufeinet.com/thread-24004-1-1.html

Amy · 发表于 2018-11-30 16:42:47

竹林风发表于 2018-11-30 16:39
楼主加油，我们都看好你哦。

谢谢支持

liu · 发表于 2018-11-30 17:07:51

我只是路过打酱油的。

惜 · 发表于 2018-12-1 10:38:07

无回帖，不论坛，这才是人道。

		自动登录	找回密码
密码			马上注册

[HTML/HTML5] 【零基础学习web前端】CSS中margin和padding的区别

相关帖子