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. SQL SERVER 索引中聚集索引分析和Transact-SQL语句优化

    一. 聚集索引B树分析1.聚集索引按B树结构进行组织的,索引B树种的每一页称为一个索引节点.B树的顶端节点称为根节点.  索引中的低层节点称为叶节点.根节点与叶节点之间的任何索引级别统称为中间级.在聚 ...

  2. 【笔记】IntelliJ IDEA配置Hibernate

    参考:imooc:http://www.imooc.com/video/7706 1.创建Hibernate的配置文件. 将依赖包导入项目.http://blog.csdn.net/a15337525 ...

  3. windows10下Python如何设置环境变量

    1.右击“我的电脑”,选择“属性”, 2.选择“高级系统设置”, 3.选择“环境变量”, 4.在“系统变量”中选中“Path”,再点“新建”.(Python.Scripts两个目录都要加,只加Pyth ...

  4. Mac下编译tesseract报错 DotProductAVX can't be used on Android

    因为我的mac是64位的,所以用32位编译,执行的时候肯定会出错的. 所以应该在 arch/simddetect.cpp中把这句# define X86_BUILD 1 注释掉,就可以了. 参考 ht ...

  5. mysql——主键自动增长&唯一索引

    首先说一下主键和唯一索引的区别 主键:一个数据库的一张表有且仅有一个主键,而且主键不能重复 唯一索引:一个数据库的一张表上唯一索引可以有多个,只是所在唯一索引上的值不能重复,这一点和主键一样 下面我们 ...

  6. python 获取探针页面，自动查询公司出口

    在一些渗透当中,我们需要批量探针出口来达到我们的目的. 所以就有了这个丑陋简洁的小脚本. #!/usr/bin/env python #-*- coding:utf- -*- import sys i ...

  7. Sub-process /usr/bin/dpkg returned an error code (1) 如何解决

    cd /var/lib/dpkg sudo mv info info.bak sudo mkdir info sudo dpkg --configure -a sudo apt-get install ...

  8. NumPy线性代数

    NumPy - 线性代数 NumPy 包包含numpy.linalg模块,提供线性代数所需的所有功能. 此模块中的一些重要功能如下表所述. 序号 函数及描述 1. dot 两个数组的点积 2. vdo ...

  9. STL标准容器特征

    一. vector vector类是一种顺序容器,可以看作动态数组,容器中的元素存放在连续存储区域. vector容器自动分配.释放.扩展.收缩存储空间,不需要使用new或delete关键字. vec ...

  10. linux Centos7 下vsftpd 安装与配 FTP

    一.说明 linux 系统下常用的FTP 是vsftp, 即Very Security File Transfer Protocol. 还有一个是proftp(Profession ftp). 我们这 ...