W3C组织建议把所有网页上的对像都放 在一个盒(box)中，设计师可以通过创建定义来控制这个盒的属性，这些对像包括段落、列表、标题、图片以及层。

盒模型主要定义四个区域：内容 (content)、边框距(padding)即内边距、边界(border)和外边距(margin)。 对于初学者，经常会搞不清楚margin，background-color，background- image，padding，content，border之间的层次、关系和相互影响。这里提供一张盒模型的平面示意图，希望便于你的理解和记忆。

margin和padding属性:

1. Margin: 包括margin-top, margin-right, margin-bottom, margin-left, 控制块级元素之间的距离, 它们是透明不可见的, 对于Fig. 2所示的上右下左margin值均为40px, 因此代码为:

margin-top: 40px;
margin-right: 40px;
margin-bottom: 40px;
margin-left: 40px;

根据上, 右, 下, 左的顺时针规则, 简写为

margin: 40px 40px 40px 40px;

当上下, 左右margin值分别一致, 可简写为:

margin: 40px 40px;

前一个40px代表上下margin值, 后一个40px代表左右margin值.

当上下左右margin值均一致, 可简写为:

margin: 40px;

2. Padding: 包括padding-top, padding-right, padding-bottom, padding-left, 控制块级元素内部, content与border之间的距离, 其代码, 简写请参考margin属性的写法.

·        浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。

代码示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />

        <style type="text/css">

            body{

                margin:0px;

            }  

            .test1{

                width:150px;

                height:150px;

                border:6px solid red;

            }  

            .test2{

                margin-top:40px;

                padding-top:40px;

                width:150px;

                height:150px;

                border:6px solid gray;

            }  

            .test2_son{

                width:80px;

                height:50px;

                border:12px solid blue;

            }

        </style>

    </head>

    <body>

        <div class="test1">test1</div>

        <div class="test2">

            <div class="test2_son">test2_son</div>

        </div>

    </body>

</html>

说明：图中灰色地带是class值为test2的div的边框，它是有宽度的；

①、内边距和外边距是针对于其作用的元素和其他元素来讲的，某一元素的内边距在另一个元素看来有可能是外边距，比如：class值为test2 div的内边距在class值为test2_test div元素看来就是外边距，

所以上面代码也可以这样写：将class值为test2的div样式列表中“padding-top:40px;”去掉，class值为test2_test div元素添加“margin-top:40px;”——这样的效果和代码2-1是一样的；

margin和padding理解的更多相关文章

  1. border，padding，margin盒模型理解

    安静的敲着键盘,已势不可挡的姿势逼近php,我想我是一个幸福的人,未来不可期,做好现在,偶尔写着自己能看懂的API,慢慢悠悠的回味一下前端基础知识. 本文盒模型理解. <!DOCTYPE htm ...

  2. 关于margin:-10000px;padding:10000px;的理解

    原文链接: 内外补丁负值法是指通过内外补丁的设置来解决一些我们通常方法不能实现的效果.例如:可以通过改变盒模型的样式来使几列div由内容撑开高度但几列div与最高的一栏等高的问题.但是为什么会出现这样 ...

  3. css-深入理解margin和padding

    最近一阶段从新学习了css,发现真的有很多很多的地方都是空白的,今天我们来总结一下margin和padding的一些不为人知的秘密! 一利用float和margin实现布局 我们首先来实现一个两列示布 ...

  4. 浅谈Margin和Padding值设置成百分数的布局

    转自:问说网http://www.uedsc.com/discussion-margin-and-padding-values.html Margin和Padding是我们在网页设计经常使用到的CSS ...

  5. 使用CSS中margin和padding的基础和注意事项

    在CSS中,margin和padding是页面布局的主要属性,如何灵活有效使用对于基于DIV+CSS设计网页方法是非常重要的,笔者经常使用且经常误使用,所以根据经验和网上资料整理出切合自己的内容,以备 ...

  6. HTML CSS——margin和padding的学习

    你在学习margin和padding的时候是不是懵了,——什么他娘的内边距,什么他娘的外边距.呵呵呵,刚开始我也有点不理解,后来通过查资料学习总算弄明白了,现在我来谈一下自己对margin和paddi ...

  7. HTML CSS——margin与padding的初学

    下文引自HTML CSS——margin和padding的学习,作者fengyv,不过加入了一些个人的看法. 你在学习margin和padding的时候是不是懵了,——什么他娘的内边距,什么他娘的外边 ...

  8. android中的margin和padding

    Android的Margin和Padding跟Html的是一样的.如下图所示:黄色部分为Padding,灰色部分为Margin. 通俗的理解: Padding 为内边框,指该控件内部内容,如文本/图片 ...

  9. Android之Margin和Padding属性及支持的长度单位

    做了个小软件后,终于把Margin和Padding弄清楚了,现总结如下: Android的Margin和Padding跟Html的是一样的.如下图所示:黄色部分为Padding,灰色部分为Margin ...

随机推荐

  1. python之模块导入和重载

    模块导入和重载 模块导入通过import语句实现,但是在同一次会话中只运行一次. 若想要再次运行文件,调用imp标准库中的reload函数: >>> from imp import ...

  2. LeetCode——Construct the Rectangle

    LeetCode--Construct the Rectangle Question For a web developer, it is very important to know how to ...

  3. springMVC @ModelAttribute学习

    springMVC @ModelAttribute学习 博客分类: Spring   @ModelAttribute 绑定请求参数到命令对象 @ModelAttribute一个具有如下三个作用: ①绑 ...

  4. 怎么用Python提取域名中的主域名

    从一个域名里面提取主域名,初想起来,貌似很简单,不就是数点[.]的个数吗?取最后一个点前后的字符串,那 abc.txt 是域名吗?那再加个验证,加上国家码,.com,.cn,.org结尾的才算,那这个 ...

  5. contos LAMP环境搭建

    LINUX搭建LAMP笔记 .YUM:Yum(全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及CentOS中的Shell前端软件包管理器.基于R ...

  6. golang learning

    开发用py和go 入职前学了几天py入职后看的代码也是py 现在终于还是要学go了 初体验:感觉和c py都很像 入门语法看起来很简单的样子 学了py之后现在各种随意 需要多注意 在函数传参的时候 c ...

  7. Python类与标准库

    Python类 >>> class MyClass: ... """A simple example class""" . ...

  8. Java小程序之回文数字

    题目:一个5位数,判断它是不是回文数.即12321是回文数,个位与万位相同,十位与千位相同. 下面是代码: package test; public class BackNum { public st ...

  9. 《JavaScript高级程序设计》第7章 函数表达式

    定义函数的方式有两种:函数声明和函数表达式 // 函数声明 function function_name(argument) { // body... } // 函数表达式 var function_ ...

  10. python学习笔记（xlwt/xlrd下载安装）

    python支持处理Excel 可以使用xlwt xlrd 模块 分别在https://pypi.python.org/pypi/xlwt  和 https://pypi.python.org/pyp ...