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. Sybase：解锁

    Sybase:解锁 Sql代码: --查询锁表 sp_iqlocks --解除锁定 drop connection[连接序号]

  2. 深入理解JVM4——线程安全

    浅谈java内存模型 不同的平台,内存模型是不一样的,但是jvm的内存模型规范是统一的.其实java的多线程并发问题最终都会反映在java的内存模型上,所谓线程安全无非是要控制多个线程对某个资源的有序 ...

  3. Autofac Getting Started(默认的构造函数注入)

    https://autofaccn.readthedocs.io/en/latest/getting-started/index.html The basic pattern for integrat ...

  4. nagios报错Error: No such CGI app - /usr/local/nagios/sbin/nagios/cgi-bin/status.cgi may not exist or is not executable by this process.

    加上rewrite rewrite ^/nagios/cgi-bin/(.*)\.cgi /$.cgi break;  

  5. NumPy副本和视图

    NumPy - 副本和视图 在执行函数时,其中一些返回输入数组的副本,而另一些返回视图. 当内容物理存储在另一个位置时,称为副本. 另一方面,如果提供了相同内存内容的不同视图,我们将其称为视图. 无复 ...

  6. LeetCode第[22]题(Java)：Generate Parentheses

    题目:制造括号序列 难度:Medium 题目内容: Given n pairs of parentheses, write a function to generate all combination ...

  7. Python 数据分析练习1

    环境 Anaconda3 Python 3.6, Window 64bit 目的 从MySQL数据库读取数据,进行数据清理,数据展示 代码 # -*- coding: utf-8 -*- import ...

  8. ggplot 画 条形图

    今天开会谈了半天自己的研究结果,同事皱着眉头,第一好像她没大听懂,第二感觉眼前一亮,但不知怎么落地.落地这个事情,交给时间吧,我想练熟我的分析. 今天搞了个简单的,条形图. 就是EXCEL里面经常玩的 ...

  9. 【C#笔札】 界面逐渐显现的实现

    如果labview做 就如同上图,so eazy! 现改C#实现这个简单的功能. 在工具箱找到Timer控件 双击 思路如下,界面打开时触发timer事件,每隔一段时间调整界面透明度 开搞 属性框中的 ...

  10. 客户端类中中记录异常的方法： 使用Log4net

    1.首先引用Log4Net 的命名空间 using log4net; 2.在使用的类中生命静态变量 log public class FileService    {        static re ...