主要定义四个区域:内容(content)、内边距(padding)、边框(border)和外边距(margin)

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

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

CSS padding margin border属性的更多相关文章

  1. CSS padding margin border属性详解

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

  2. CSS padding margin border属性详解【转载】

    本文转载自:http://www.cnblogs.com/linjiqin/p/3556497.html ,感谢相关博主. 图解CSS padding.margin.border属性 W3C组织建议把 ...

  3. 转-CSS padding margin border属性详解

    原文链接:http://www.cnblogs.com/linjiqin/p/3556497.html 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在 ...

  4. [转]图解CSS的padding,margin,border属性(详细介绍及举例说明)

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

  5. 图解CSS的padding,margin,border属性(详细介绍及举例说明)

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

  6. 【转】图解CSS的padding,margin,border属性(详细介绍及举例说明)

    W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主要定义四个区域:内容(content).边框距(p ...

  7. 图解CSS的padding,margin,border属性

    原文出处:http://hi.baidu.com/sonan/item/af05cf8759810d1cc31627d5 觉得不错,保存以备用. --------------------------- ...

  8. JQUERY 获取 DIV 宽度与高度(width,padding,margin,border)

    一般讲的宽度指的是内容宽度,但一个 div 的实际宽度不仅只于内容宽度,尤其在做 CSS 排版时更不能搞错,必须同时考虑 Padding.Border 与  Margin 的宽度,四个加起来才是 di ...

  9. css中元素border属性的构成以及配合属性值transparent可得到一些特殊形状1.0

    css中我们经常使用到元素的border属性和属性值transparent,可能好多人还不太了解border的构成以及配合transparent的一些效果: 1.border的构成如下所示:   ht ...

随机推荐

  1. javascript --- 只继承于原型

    正如上次所述,,出于效率考虑,我们应该尽可能的将一些可重用的属性和方法添加到原型中去. 如果养成了这个好习惯,我们仅仅依靠原型就能顺利的完成继承关系的构建了. 毕竟采用new her()方法将her的 ...

  2. CSS后代选择器,子选择器和相邻兄弟选择器

    平时在代码练习中,经常用到后代选择器,子选择器也会用到,这里做个总结: 1,后代选择器和子选择器区别: ①写法不一样:后代选择器的标识为:空格 如:ul li{width:150px;} [ul和li ...

  3. SQL Server 分组 去除从复列

    下面先来看看例子: table表 字段1 字段2 id        name 1           a 2           b 3           c 4           c 5    ...

  4. SSH整合简述一

    1.web.xml中配置 struts2过滤器 <filter> <filter-name>struts2</filter-name> <filter-cla ...

  5. [android] 手机卫士保存密码时进行md5加密

    一般的手机没有root权限,进不去data/data目录,当手机刷机了后,拥有root权限,就可以进入data/data目录,查看我们保存的密码文件,因此我们需要对存入的密码进行MD5加密 获取Mes ...

  6. android学习笔记 对话框合集

    package com.zhangbz.dialog; import android.app.Activity; import android.app.AlertDialog; import andr ...

  7. OC小实例关于init方法不小心的错误

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

  8. js检测浏览器型号

    公司要求做内部统计,要求监控客服玩游戏使用的浏览器的型号,是火狐的.谷歌的.还是IE的等等. [code lang="javascript"] /**** * 目前识别范围 * M ...

  9. QA:java.lang.RuntimeException:java.io.FileNotFoundException:Resource nexus-maven-repository-index.properties does not exist.

    QA:java.lang.RuntimeException:java.io.FileNotFoundException:Resource nexus-maven-repository-index.pr ...

  10. SQLServer中登录名的用户名配置

    其实这个问题困扰我很久了. 今夏(13.7)实习的时候第一次接触sqlserver 当时是统一安排,按部就班的做就行. 那时候链接数据库用的id是sa. 后来自己做小程序时候举得不管什么都用sa登录好 ...