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;}来统一。

代码示例：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.         <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  5.         <style type="text/css">
  6.             body{
  7.                 margin:0px;
  8.             }  
  9.  
  10.             .test1{
  11.                 width:150px;
  12.                 height:150px;
  13.                 border:6px solid red;
  14.             }  
  15.  
  16.             .test2{
  17.                 margin-top:40px;
  18.                 padding-top:40px;
  19.                 width:150px;
  20.                 height:150px;
  21.                 border:6px solid gray;
  22.             }  
  23.  
  24.             .test2_son{
  25.                 width:80px;
  26.                 height:50px;
  27.                 border:12px solid blue;
  28.             }
  29.         </style>
  30.     </head>
  31.     <body>
  32.         <div class="test1">test1</div>
  33.         <div class="test2">
  34.             <div class="test2_son">test2_son</div>
  35.         </div>
  36.     </body>
  37. </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. Json日期格式 转化为 YYYY-MM-DD-hh-mm-ss

    function timeStamp2String(time) { var datetime = new Date(); datetime.setTime(time); var year = date ...

  2. LeetCode——single-number系列

    LeetCode--single-number系列 Question 1 Given an array of integers, every element appears twice except ...

  3. springBean获取的几种方法

    1.通过FileSystemApplicationContext来获取(不常用,因为要spring配置文件的绝对路径) 2.通过ClassPathXmlApplicationContext来获取(常用 ...

  4. Javascript -- 级联菜单, javascript解析xml文件

    1. cities.xml 保存省份和城市 <?xml version="1.0" encoding="GB2312"?> <china> ...

  5. FZU 1759 Super A^B mod C 指数循环节

    Problem 1759 Super A^B mod C Time Limit: 1000 mSec    Memory Limit : 32768 KB  Problem Description G ...

  6. yii2：frontend/frontactoin curl生成

    yii2:frontend/frontactoin curl生成 想要覆写已存在文件,选中 “overwrite” 下的复选框然后点击 “Generator”.如果是新文件,只点击 “Generato ...

  7. 关于绑定的C#代码+转换器

    BindingOperations.SetBinding(                exp, Expander.IsExpandedProperty,                new Bi ...

  8. eclipse导入android项目错误，项目名称上有红叉，但代码中无报错

    首先,在项目上右键,属性,选择编译目标,选择android版本或把Android的版本调高一点.

  9. linux 里rpm包到底是干什么用的

    Linux RPM全称是“RedHat Package Manager”,最早是Red Hat公司开发的,后来在CentOS.Fedora.SUSE都用它.而rpm包则是软件编译完成后按照RPM机制打 ...

  10. 26-THREE.JS 虚线绘制线框样式几何图形的材质

    <!DOCTYPE html> <html> <head> <title></title> <script src="htt ...