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. jquery page

  2. 微信 openId

    摘要 关于微信开发的话题,例子确实已经有不少,但大部分都是人云亦云,很多小细节或者需要注意的地方却大多没有讲清楚,这令很多刚开始开发的人感觉大很迷茫.而我今天要说的话题,主要着眼于两个方面. 一:如何 ...

  3. PrintArea打印,@media screen解决移动web开发的多分辨率问题,@media print设置打印的样式

    PrintArea打印,局部DIV打印插件,依赖JQuery. github:https://github.com/RitsC/PrintArea 当打印时需要临时改变页面布局,可以使用 @media ...

  4. 酷壳用的还是 Wordpress

    WordPress是一种使用PHP语言开发的博客平台,用户可以在支持PHP和MySQL数据库的服务器上架设属于自己的网站.也可以把 WordPress当作一个内容管理系统(CMS)来使用. http: ...

  5. 修改sudoers权限之后无法sudo的最简单解决方法

    网上百度一下进入recovery模式或是单用户模式仍然修改不了sudoers的权限, 后来终于在网上找到了一种最简单的方法,那就是 pkexec chmod 0440 /etc/sudoers

  6. java.lang.IllegalArgumentException: Failed to decrypt.

    加密失败. 附加信息: org.springframework.transaction.CannotCreateTransactionException: Could not open JDBC Co ...

  7. Openstack虚拟机创建流程

    续上一篇Openstack安装配置 一,keystone交互认证阶段 1,发送用户名和密码给keystone认证获取token 2,带着token访问nova-api 3,nova-api使用toke ...

  8. myslq中插入时间当前时间

    create table classic_movie_info( id ) primary key auto_increment not null, movie_name varchar(), mov ...

  9. 1 duilib 自绘标题 最大化图标显示bug ----WindowImplBase的bug

    窗口最大化之后有两个问题,     1.最大化按钮的样式还是没变,正确的样式应该是这样的     2.再次点击最大化按钮,不能还原到正常大小.     这个是WindowImplBase的bug,已经 ...

  10. Java 语言基础之语句

    程序的四种流程控制结构: 顺序结构 判断结构 : if 语句 选择结构 : switch 语句 循环结构 : while 语句, do...while 语句, for 语句 以下主要分析循环结构: w ...