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

  1. margin:层的边框以外留的空白
  2. background-color:背景颜色
  3. background-image:背景图片
  4. padding:层的边框到层的内容之间的空白
  5. border:边框
  6. 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. Css 学习——left与offsetLeft的区别

    1. 首先一个标签元素的left属性是一个string类型,而offsetLeft是一个numberle类型. 求证: <script> window.onload = function( ...

  2. [JS,NodeJs]个人网站效果代码集合

    上次发的个人网站效果代码集合: 代码集合: 1.彩色文字墙[鼠标涟漪痕迹] 2.彩色旋转圆环 [模仿http://www.moma.org/interactives/exhibitions/2012/ ...

  3. XML的约束(dtd)

    DTD(Document Type Definition),文档类型定义,DTD文件应使用UTF-8或Unicode   1.XML中有多少个元素,就在dtd文件中写几个 <!ELEMENT&g ...

  4. win10应用部署到手机出现问题Exception from HRESULT: 0x80073CFD

    今天把应用部署到手机上时,出现了这样的问题 Exception from HRESULT: 0x80073CFD 具体错误是: Error Error : DEP0001 : Unexpected E ...

  5. 将内表通过TXT文本输出

    PARAMETERS: num TYPE i. TYPE-POOLS: truxs. "类型组 DATA:w_filename TYPE string. TYPES:BEGIN OF ty_ ...

  6. ABAP中Conversion Routine示例

          在SAP的Domain定义中,Output Length下面有个Convers. routine的标识,这是SAP用来进行输入输出转换的.我们知道,屏幕上的I/O字段都是字符串形式的,而数 ...

  7. 简单好用的Toast封装类——EasyToast

    我们用toast时不能设置显示的时间,而且不支持在线程中展示toast,下面我对原始的toast进行了封装,这样我们可以很方便的进行toast的使用了. package com.kale.lib.ut ...

  8. Android拍照保存在系统相册不显示的问题

    Intent intent = new Intent(Intent.ACTION_MEDIA_SCANNER_SCAN_FILE); Uri uri = Uri.fromFile(new File(& ...

  9. HBase数据模型剖析

    出处:http://wuyudong.com/1987.html HBase 进行数据建模的方式和你熟悉的关系型数据库有些不同.关系型数据库围绕表.列和数据类型——数据的形态使用严格的规则.遵守这些严 ...

  10. TortoiseSVN使用简介(转)

    TortoiseSVN使用简介 1 安装及下载client 端 2 什么是SVN(Subversion)? 3 为甚么要用SVN? 4 怎么样在Windows下面建立SVN Repository? 5 ...