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. java&javaweb学习笔记

    http://blog.csdn.net/h3243212/article/details/50659471

  2. sql实际应用-递归查询

    1.既然要谈到sql,数据库表是必须的 2.数据结构     3.获取某个节点的所有子节点     传统的写法(sql2000) 很麻烦,暂且就不写了     来看看CTE的写法 CREATE PRO ...

  3. iOS --转载 NSRange 和 NSString 详解

    一.NSRange 1.NSRange的介绍 NSRange是Foundation框架中比较常用的结构体, 它的定义如下: typedef struct _NSRange { NSUInteger l ...

  4. 基于注解的Spring AOP拦截含有泛型的DAO

    出错场景 1.抽象类BaseDao public abstract class BaseDao<T> { public BaseDao() { entityClass = (Class&l ...

  5. servlet ; basepath ; sendredirected ;

    Eclipse 新建 jsp页面里自动生成以下代码: <%String path = request.getContextPath();String basePath = request.get ...

  6. 一个有意思的 Java HashSet 问题

    昨天,在百度的 java吧 看到有人问关于 HashSet 的问题.下面是他贴出的代码: import java.util.HashSet; public class JavaTest { publi ...

  7. VMware虚拟机Bridged(桥接模式)

    转载于:https://www.linuxidc.com/Linux/2016-09/135521.htm   vmware为我们提供了三种网络工作模式,它们分别是:Bridged(桥接模式).NAT ...

  8. Html5-draggable元素拖动

    Html5元素拖动 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持拖动 ...

  9. iOS核心动画详解(一)

    前言 这篇文章主要是针对核心动画(Core Animation)的讲解,不涉及UIView的动画.因为内容较多,这篇文章会分为几个章节来进行介绍.本文主要是介绍核心动画的几个类之间的关系和CAAnim ...

  10. Java中native关键字使用

    native是与C++异构开发的时候用的.java自己开发不会使用