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. 20145235李涛《网络对抗》Exp9 Web安全基础实践

    基础问答 SQL注入攻击原理,如何防御? SQL注入攻击就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意SQL命令的目的. 对于SQL注入攻击的防范 ...

  2. 20145109 《Java实验报告1》

    Experiment Ⅰ --getting familiar with JDK (Linux + Eclipse) Content 1.Compile and run easy Java progr ...

  3. Oracle 事务处理

    事务的四大特性 1.原子性(Atomicity) 事务的原子性是指事务中包含的所有操作要么都做,要么都不做,保证数据库是一致的. 2.一致性(Consistency) 一致性是指数据库在事务操作前和事 ...

  4. Python 文件操作综合案例

    # 案例 # 文件的复制 # 要求 # 将一个文件, 复制到另外一个副本中 # 步骤分析 # 1. # 只读模式, 打开要复制的文件 import os import shutil path = &q ...

  5. asp.net Core 部署到CentOs7上，使用Nginx做代理

    一.CentOs7部署Nginx 1.准备工作 Nginx的安装依赖于以下三个包,意思就是在安装Nginx之前首先必须安装一下的三个包,注意安装顺序如下: 1 SSL功能需要openssl库,直接通过 ...

  6. JAVA实现计算三角形等平面图形的夹角问题

    问题重现 现在一平面上有三点,分别是x(x1,x2),y(y1,y2),z(z1,z2),图形大致如下 现要求用java代码求出∠YxZ的度数. 问题分析及数学模型 1.要求两直线的夹角,就想到数学中 ...

  7. dataframe 列名重新排序

    在用list包含多个dict的模式生成dataframe时,由于dict的无序性,而uci很多数据的特征名直接是1,2,3...,生成的dataframe和原生的不一样, 为了方便观看和使用,我们将其 ...

  8. 自己用java实现飞鸽传书 1 - 实现socket通信

    第一步: 建立服务端客户端,实现端到端通信.因为要传递文件,信号量较大,故使用TCP/IP协议. 服务端和客户端都要建立socket,而后通过socket进行通信.目前只实现服务端到客户端的单向通信. ...

  9. 51nod 1640 MST+二分

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1640 1640 天气晴朗的魔法 题目来源: 原创 基准时间限制:1 秒 ...

  10. [转载]java操作word生成水印

    应用场景 为了保护版权或辨别文件的真伪,有时需要在生成的Word文件中动态添加水印,PageOffice组件的WaterMark类就封装了给在线编辑的Word文件添加水印这一功能,调用接口非常简单. ...