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. (转)javascript日期格式化扩展

    转自:http://blog.csdn.net/vbangle/article/details/5643091 javascript Date format(js日期格式化)   方法一:这个很不错, ...

  2. 如何在ChemDraw 15.1 Pro中添加模板

    ChemDraw化学绘图工具为了方便用户的使用,特地开发了众多的各种类型模板.用户在绘制一些简单或复杂的化学结构式时,可以直接从ChemDraw模板库里直接调用使用,虽然ChemDraw模板非常的丰富 ...

  3. 57、Design Support Library 介绍及环境搭建

    一.Material Design几个要素 扁平化.简洁: 水波反馈: 良好体验的过渡动画: 材料空间位置的直观变化: 二.Android Studio配置 在 build.gradle 文件中加入, ...

  4. bzoj 1415(概率dp和bfs预处理)

    感觉挺经典的一道题目. 先用 bfs 预处理下一步走到的位置.因为每一步走法都是固定的,所以可以用dp的方法来做. 1415: [Noi2005]聪聪和可可 Time Limit: 10 Sec  M ...

  5. Kotlin——高级篇(五):集合之常用操作符汇总

    在上一篇文章Kotlin--高级篇(四):集合(Array.List.Set.Map)基础中讲解到了数组Array<T>.集合(List.Set.Map)的定义与初始化.但是由于篇幅的原因 ...

  6. HDU 3695 / POJ 3987 Computer Virus on Planet Pandora

      Computer Virus on Planet Pandora Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 1353 ...

  7. input输入框输入小写字母自动转换成大写字母

    input输入框输入小写字母自动转换成大写字母有两种方法 1.用js onkeyup事件,即时把字母转换为大写字母: html里input加上 <input type="text&qu ...

  8. cocos2d-X学习之主要类介绍:精灵角色(CCSprite)

    CCSprite是一副2D图像,CCSprite可以通过图像或者图像中的一个矩形子区域创建 如果它的父节点或者任意继承树上的节点是CCspriteBatchNode则具有下述特性: 父节点是CCSpr ...

  9. Linux磁盘管理命令(fdisk,mount,umount,mkfs)

    查看磁盘:fdisk -l 一块磁盘可以分14个分区 [root@wendyhost ~]# fdisk -l Disk /dev/sda: 64.4 GB, 64424509440 bytes 25 ...

  10. jsp tutorial

    http://blog.csdn.net/JavaEETeacher/article/details/1932447