margin and padding are the two most commonly used properties for spacing-out elements. A margin is the space outside something, whereas padding is the space inside something.

比如我们该页的h2改成如下样式:

h2 {
font-size: 1.5em;
background-color: #ccc;
margin: 20px;
padding: 40px;
}

将呈现这样的效果

正常是这个样子的

尝试把各个区域的颜色标出来,

4边是可以单独设置的,

以上内容copy自html dog.

Border就是这样子的

h2 {
border-style: dashed;
border-width: 3px;
border-left-width: 10px;
border-right-width: 10px;
border-color: red;
}

CSS 边距和填充的更多相关文章

  1. CSS 内边距 (padding) 实例

    CSS 内边距 (padding) 实例元素的内边距在边框和内容区之间.控制该区域最简单的属性是 padding 属性. CSS padding 属性定义元素边框与元素内容之间的空白区域.CSS 内边 ...

  2. CSS外边距合并的几种情况

    CSS外边距合并的几种情况 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 外边距在CSS1中就有 The width ...

  3. CSS之背景的填充范围

    1.资料:CSS2.1 进行了更正:元素的背景是内容.内边距和边框区的背景 2.也就是说背景颜色,background-color:这些会填充内边距和边框border, 而不会填充外边框margin的 ...

  4. CSS 内边距 padding 属性

    CSS padding 属性定义元素边框与元素内容之间的空白区域. ㈠padding(填充) ⑴当元素的 padding(填充)内边距被清除时,所释放的区域将会受到元素背景颜色的填充. ⑵单独使用 p ...

  5. CSS外边距叠加问题

    CSS外边距叠加就是margin-collapse,边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距,水平边 距永远不会重合.重叠结果计算规则:①.两个相邻的外边距都是正数时,折叠结果是它 ...

  6. CSS外边距margin上下元素重叠

    CSS外边距margin上下元素重叠 转载:http://www.gaoyouyou.com/view/77.htm 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大的值.如 ...

  7. CSS边距---盒子模型

    CSS盒子模型 盒子模型主要是有margin(外边距).border(边框).padding(内边距).content(内容)组成,这些属性我们可以把它转移到我们日常生活中的盒子上来理解,日常生活中所 ...

  8. css内边距与外边距的区别

    你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素.内联元素中的区别?什么时候该用 padding而不是margin?你知道负margin吗?你 ...

  9. Css 外边距折叠(collapsed margin ) 浅析

    Css 外边距折叠(collapses margin ) a.先来看看w3c 文档对于外边距折叠的定义: In CSS, the adjoining margins of two or more bo ...

随机推荐

  1. 如何修改3D模型的原子属性

    Chem3D是专门用于绘制化学三维模型和进行计算化学数据的ChemOffice组件,在三维模型中每个原子都有众多属性,比如原子类型.原子符号.原子编号以及原子颜色等等.掌握Chem 3D模型的原子属性 ...

  2. Python中xlrd和xlwt模块使用方法 (python对excel文件的操作)

    本文主要介绍可操作excel文件的xlrd.xlwt模块.其中xlrd模块实现对excel文件内容读取,xlwt模块实现对excel文件的写入. 安装xlrd和xlwt模块 xlrd和xlwt模块不是 ...

  3. Domino移动Web上传的附件到RichText域

    只是从网上拷贝下来,没有测试. 得到上传文件的路径http://searchdomino.techtarget.com/tip/Trap-an-attachment-path-via-the-Domi ...

  4. 编写高质量代码–改善python程序的建议(二)

    原文发表在我的博客主页,转载请注明出处! 建议七:利用assert语句来发现问题断言(assert)在很多语言中都存在,它主要为调试程序服务,能够快速方便地检查程序的异常或者发现不恰当的输入等,可防止 ...

  5. 【Python基础】装饰器的解释和用法

    装饰器的用法比较简单,但是理解装饰器的原理还是比较复杂的,考虑到接下来的爬虫框架中很多用到装饰器的地方,我们先来讲解一下. 函数 我们定义了一个函数,没有什么具体操作,只是返回一个固定值 请注意一下缩 ...

  6. [LintCode] 第k大元素

    基于快速排序: class Solution { public: /* * param k : description of k * param nums : description of array ...

  7. ES6入门概览一

    一.let const 1.let命令:声明变量仅在块级作用域有效:let实际上为js新增了块级作用域 好处: -不存在变量提升: -内部声明的变量 函数 不会影响外部 -不可重复声明变量 2.con ...

  8. ubuntu设置开机启动脚本

    rc.local脚本 rc.local脚本是一个ubuntu开机后会自动执行的脚本,我们可以在该脚本内添加命令行指令.该脚本位于/etc/路径下,需要root权限才能修改. 该脚本具体格式如下: #! ...

  9. Powershell Function Get-TimeZone

    代码原文地址: https://gallery.technet.microsoft.com/scriptcenter/Get-TimeZone-PowerShell-4f1a34e6 <# .S ...

  10. Access导入Sql 2008 R2 错误 0xc020801c

    在选择数据源界面: 数据源:Microsoft Access 文件名:选择要导入的文件 用户名:admin 密码:(空的) 猛击”高级“按钮 切到”高级“选项卡,访问权限设为 ReadWrite,去掉 ...