CSS padding margin border属性详解

图解CSS padding、margin、border属性

W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落、列表、标题、图片以及层。盒模型主要定义四个区域:内容(content)、内边距(padding)、边框(border)和外边距(margin)。对于初学者,经常会搞不清楚margin,background-color,background-image,padding,content,border之间的层次、关系和相互影响。这里提供一张盒模型的3D示意图,希望便于你的理解和记忆。

margin:层的边框以外留的空白
background-color:背景颜色
background-image:背景图片
padding:层的边框到层的内容之间的空白
border:边框
content:内容

接下来将讲述HTML和CSS的关键——盒子模型(Box model)。理解Box model的关键便是margin和padding属性,而正确理解这两个属性也是学习用css布局的关键。

注: 为什么不翻译margin和padding?
原因一: 在汉语中并没有与之相对应的词语;
原因二: 即使有这样的词语, 由于在编写css代码时, 必须使用margin和padding, 如果我们总用汉语词语代替其来解释的话, 到了实际应用时容易混淆margin和padding的概念。

如果有一点Html基础的话,就应该了解一些基本元素(Element),如p、h1~h6、br、div、li、ul、img等。如果将这些元素细分,又可以分别为顶级(top-level)元素、块级(block-level)元素和内联(inline)元素。

块级元素是构成一个html的主要和关键元素,而任意一个块级元素均可以用Box model来解释说明。
Box Model: 任意一个块级元素均由content(内容)、padding、background(包括背景颜色和图片)、border(边框)、margin五个部分组成。
立体图如下:

平面图如下:

根据以上两图,相信大家对于Box model会有个直观的认识。

以下说明margin和padding属性:
1、margin: 包括margin-top、margin-right、margin-bottom、margin-left,控制块级元素之间的距离,它们是透明不可见的。根据上、 右、下、左的顺时针规则,可以写为 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有关。

注: 当你想让两个元素的content在垂直方向(vertically)分隔时,既可以选择padding-top/bottom,也可以选择margin-top/bottom,再此Ruthless建议你尽量使用padding-top/bottom来达到你的目的,这是因为css中存在Collapsing margins(折叠的margins)的现象。

Collapsing margins: margins折叠现象只存在于临近或有从属关系的元素,垂直方向的margin中。

详细说明如下:
如果只提供一个,将用于全部的四条边;
如果提供两个,第一个用于上-下,第二个用于左-右;
如果提供三个,第一个用于上,第二个用于左-右,第三个用于下;
如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边。

body { padding: 36px;} //对象四边的补丁边距均为36px
body { padding: 36px 24px; } //上下两边的补丁边距为36px,左右两边的补丁边距为24px
body { padding: 36px 24px 18px; } //上、下两边的补丁边距分别为36px、18px,左右两边的补丁边距为24px
body { padding: 36px 24px 18px 12px; } //上、右、下、左补丁边距分别为36px、24px、18px、12px

css中padding与margin的更多相关文章

  1. CSS中padding和margin以及用法

    CSS中padding与margin 1.padding:内边距,表示控件内容相对于边缘的距离. 2.margin:外边距,表示控件边缘相对于父空间的边缘. 参考:http://www.studyof ...

  2. CSS中padding、margin、bordor属性详解

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

  3. CSS中padding、margin两个重要属性的详细介绍及举例说明

    http://www.x6x8.com/IT/199.html 本文将讲述HTML和CSS的关键—盒子模型(Box model). 理解Box model的关键便是margin和padding属性, ...

  4. CSS中 Padding和Margin两个属性的详细介绍和举例说明

    代码示例: <!doctype html> <html lang="en"> <head> <meta charset="UTF ...

  5. css中padding和magin的区别

    1.Margin 用来设置页面中一个元素所占空间的边缘到相邻元素之间的距离. 如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边.   如果只提供一个,将用于全部的四边.   如果提供两个,第 ...

  6. css中的默认margin

    上班打酱油中,你懂的; body的margin为8px; webkit默认行高18px:height18px; 默认font-size16px p默认margin是16px 0 16px 0; ul和 ...

  7. CSS笔记——padding,margin为百分比计算时的参照对象

    div的padding为百分比的两种情况 padding-top,padding-bottom,margin-top,margin-bottom是百分比时是按照当前元素的父级元素的宽度来计算的 1. ...

  8. HTML中padding和margin的区别和用法

     margin(外边距) 定义:margin是用来隔开元素与元素的间距,发生在元素本身的外部,margin用于布局分开元素使元素与元素互不相干. 提示:margin: top right bottom ...

  9. CSS中Padding的用法

    Padding的英文意思是填充,在CSS中则是设置内边距属性. padding不允许使用负值 1. 四个参数时: padding: 10px,20px,30px,40px; 上边距:10px 右边距: ...

随机推荐

  1. RxJava/RxAndroid 使用实例实践

    原文地址 RxAndroid Tutorial响应式编程(Reactive programming)不是一种API,而是一种新的非常有用的范式,而RxJava就是一套基于此思想的框架,在Android ...

  2. 机器学习--聚类系列--DBSCAN算法

    DBSCAN算法 基本概念:(Density-Based Spatial Clustering of Applications with Noise) 核心对象:若某个点的密度达到算法设定的阈值则其为 ...

  3. java的if语句,少于一行可以省略大括号

    我们认识的 if 语句,大概是这样的: if(条件){ 语句1; }else{ 语句2; } 如果要执行的语句少于1行,大括号是可以省略的 可以让程序更简洁和美观 if(条件){ 语句1; 语句2; ...

  4. Solidity两个string的比较

    有三种比较方法 方法一:比较string的哈希值方法二:先比较string的长度,再比较每个对应位置的字母是否相同方法三:先比较string的长度,再比较string的哈希值一.比较string的哈希 ...

  5. oracle 父子关系

    语句递归查找父子关系语句 表结构及数据 1.通过根节点遍历子节点 select t.*,LEVEL from Test2 t START WITH t.parentid=0 CONNECT BY PR ...

  6. APICloud APP前端框架——手机APP开发、APP制作、APP定制平台

    概述 APICloud前端框架,包括api.js和api.css.api.css处理不同平台浏览器的默认样式.api.js是一个JavaScript库.是APICloud为混合移动开发定制的轻量Jav ...

  7. “Device eth0 does not seem to be present”解决办法

    在KVM中克隆出新的CentOS虚拟机时,出现如下问题:# service network restartShutting down loopback insterface: [ OK ]Bringi ...

  8. 【转】使用Freemarker实现网页静态化

    使用Freemarker实现网页静态化 2017年08月20日 20:45:51 阅读数:1981 1.1. 什么是freemarker FreeMarker是一个用Java语言编写的模板引擎,它基于 ...

  9. spark算子集锦

    Spark 是大数据领域的一大利器,花时间总结了一下 Spark 常用算子,正所谓温故而知新. Spark 算子按照功能分,可以分成两大类:transform 和 action.Transform 不 ...

  10. zoj Continuous Login

    Continuous Login Time Limit: 2 Seconds      Memory Limit: 131072 KB      Special Judge Pierre is rec ...