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. vim 命令大全(写的非常全和好)http://blog.csdn.net/woshixiaosimao/article/details/54312738

    下文转自链接.由原作者陈皓译自<Learn ViM Progressively>,非常不错. ——————————正文开始—————————— 你想以最快的速度学习人类史上最好的文本编辑器 ...

  2. 【R】均值假设检验

    p_value<-function(cdf,x,parament=numeric(0),side=0) { n<-length(parament) p<-switch(n+1, cd ...

  3. IPOL图像处理分析经典在线(文献+源码)

    网址: IPOL Journal · Image Processing On Line https://www.ipol.im/ 分类: 搜索: 下载文献和源码: NLM算法:IPOL Journal ...

  4. trait优先级 与 使用

    之前一直沒有讲到trait,在此我不得不提一下trait中的优先级: 在trait继承中,优先顺序依次是:来自当前类的成员覆盖了 trait 的方法,而 trait 则覆盖了被继承的方法. For e ...

  5. C# 多线程学习(五)线程同步和冲突解决

    from:https://blog.csdn.net/codedoctor/article/details/74358257 首先先说一个线程不同步的例子吧,以下为售票员的模拟售票,多个售票员出售10 ...

  6. Havel-Hakimi定理(推断是否可图序列)

    给定一个非负整数序列{dn},若存在一个无向图使得图中各点的度与此序列一一相应.则称此序列可图化.进一步.若图为简单图,则称此序列可简单图化 至于能不能依据这个序列构造一个图,就须要依据Havel-H ...

  7. 【转】Linux下mysql操作

    本文转自:http://www.cnblogs.com/xiaochaohuashengmi/archive/2011/10/18/2216279.html 1.linux下启动mysql的命令:my ...

  8. Android中流式布局和热门标签

    1.流式布局特点.应用场景.2.自定义ViewGroup (1)onMeasure:测量子View的宽和高,设置自己的宽和高. (2)onLayout:设置子View的位置. onMeasure:根据 ...

  9. Sublime text 3 快捷键:

    Ctrl+Shift+[  选中代码,按下快捷键,折叠代码. Ctrl+Shift+]  选中代码,按下快捷键,展开代码.  Ctrl+Shift+P:打开命令面板 Ctrl+P:打开搜索框,搜索项目 ...

  10. 170228、Linux操作系统安装ELK stack日志管理系统--(1)Logstash和Filebeat的安装与使用

    安装测试环境:Ubuntu 16.04.2 LTS 前言 (1)ELK是Elasticsearch,Logstash,Kibana 开源软件的集合,对外是作为一个日志管理系统的开源方案.它可以从任何来 ...