margin & padding - 金鱼都能懂的CSS必学属性

margin 与 padding 这两个属性应该是所有新手必学的两大属性，也是网页入门必备的一项常识，margin 与 padding 分别控制物件的外部距离与内部距离，其可接受的值可由 1 个，至多到 4 个，撰写方式如同下面这样

margin: 10px 10px 10px 10px;
padding: 10px 10px 10px 10px;

margin 与 padding 可接受的值，较常见到的值大致上有以下几种

margin 与 padding 会影响到一个物件在网页中占据的空间，所以了解两者在网页中的尺寸计算原理，是非常重要的一件事，请各位金鱼千万要仔细了解喔。

1 个值到 4 个值有甚麽差别

margin 与 padding 可以设定 1 到 4个值，其原理跟「Border & outline- 金鱼都能懂的CSS必学属性」中的「单一属性的四值设定法」写很相似，简单来说就是可以利用数值的顺序与数量，来决定你要设定的方向，其值的数量与代表方向，就像下面这样

margin

/*四个值，个别指定*/
margin: 上  右  下   左;

/*三个值，左右采用同一个值，上下则分开指定*/
margin: 上   [右左]    下;

/*二个值，【上下】采用同一值，【左右】采用同一值*/
margin: [上下]   [右左];

/*一个值，【上下左右】都使用相同的值*/
margin: [上右下左];

padding

/*四个值，个别指定*/
padding: 上  右  下   左;

/*三个值，左右采用同一个值，上下则分开指定*/
padding: 上   [右左]    下;

/*二个值，【上下】采用同一值，【左右】采用同一值*/
padding: [上下]   [右左];

/*一个值，【上下左右】都使用相同的值*/
padding: [上右下左];

简单的来看，四个值的顺序其实就是一个顺时针的方向，所以非常好记忆 (这段话也应该有印象，对！就是直接复制 border 那篇的...被打)。

margin 的用途

margin 的作用，是设定一个物件与周围物件之间的距离，或者说「自身周围要扩张多少地盘」，常见的翻译称之为「外距」，用占地盘的观念来看是最实际的，例如我今天有个物件的 CSS 设定如下

div{
	width: 200px;
	height: 200px;
	background-color: #666;
	margin: 10px;
}

这时我的物件宽高各 200px ，表示我的物件是一个 200px 宽，200px 高的灰色外观，基本占据的空间就是 200 x 200 像素了，接着可以看到 margin: 10px; 这表示我的物件还往外部四周占了各 10px 的空间，这空间都算是这物件的，别人不可侵犯，而这空间如空气一般的存在，就像是领空一样，看不到但却又实际存在那条界线，所以你对物件设定背景色时，margin 的空间范围是不会有背景色的，在排版时 margin 所占据的空间也必须计算进去，否则很容易出现跑版状况，新手千万要再三注意，而一个物件的尺寸是如何被计算出来的？这部分可以参考免费教学影片「金鱼都能懂网页设计入门 : 区块尺寸计算」以及「金鱼都能懂网页设计入门 : 换个新盒子」来了解。

用 Auto 来做水平置中

设计网页时经常可以见到水平居中的版面区块，倘若不是使用 flex 的话，大多这样的版面区块多是使用 margin: auto; 来做水平居中的， auto 的用途，使用比较白话的说明就是「将剩余的空间分配给具备这个值的位置」，所以倘若我有一个物件的 CSS 设定如下

div{
	width: 200px;
	height: 200px;
	background-color: #666;
	margin: 0px 0px 0px auto;
}

而父层空间又大於200px 的话，这个物件就会靠右侧，因为「列的剩余空间」被分配到了该物件的左侧，物件就会靠右侧了，那如果我们设定左右都是 auto 的话呢？像是下方原始码这样

div{
	width: 200px;
	height: 200px;
	background-color: #666;
	margin: 0px auto;
}

这样「列的剩余空间」就会被分配到物件的左边跟右边，所以「列的剩余空间」会被平均分成两等份，分别给予该物件的左侧与右侧，於是物件就水平居中啦！

使用百分比单位怎麽算

在设定 margin 时使用百分比为单位，算是 RWD 网页可能会见到的状况， margin 使用百分比时，由於百分比是相对单位，那就必须要了解百分比是依据谁来做计算的，实际上 margin 使用百分比为单位的时候，是依据父层的内容空间(Content box) 做为百分百，所以如果我对一个物件设定了 margin-left: 10%; 的话，那就表示 margin-left 将会是父层 width 属性值的 10%，切记计算时千万别算错了喔。

Padding 的用途

padding 的用途是设定物件边框(border) 内与资料之间的留白空间，常见的翻译是称之为「内距」，让你的资料不致於贴着边框线，在版面编排中，可说是经常用到的一个属性，这边需要特别了解的是 padding 与 width 之间的关系，此外也会牵扯到 box-sizing 这个属性，而 box-sizing 将会在下一篇中提到，所以暂时我们先聚焦在 padding 与 width 两个属性即可。

Padding 预设会增加物件的可见尺寸

如标题所说的，一个物件的尺寸会因为有无添加 padding 而产生变化，实际上你对一个物件设定 width 属性时，仅是针对该物件的「内容空间」设定宽度，这个内容空间我们姑且称为「content box」，也就是内容的盒子，若你对该物件设定了 padding 之後，padding 的空间则是会添加到 width 之外，所以物件的尺寸就变成了「width + padding 」(height 亦同)，但由於 padding 是添加在 border 与 width 之间的空间，所以 padding 的空间是会显示背景色彩的。

使用百分比很特别

对 padding 设定百分比这个单位时，不管是上或下或左或右，都是采用父层的内容空间(Content box) 的「宽」做为百分百，再次强调！！！不管「上下左右」，都是采用「父层的宽」做为百分百，这一点很多人都会觉得奇怪，但规范就是如此制定的，就照做吧！而这样特别的地方，对於我们在制作 RWD 网页时，设定一个等比例区块就很有用了，等比例区块有兴趣的朋友，可参考 Amos 之前的「CSS专家密技3 - CSS Protips」这场直播，看看怎麽制作等比例区块。

很常搭配 border

padding 由於本身特性的关系，所以我们经常会搭配 border 或 background-color 来使用，主要都是因为视觉设计的关系，这样的设定在视觉上面有时候是较为美观的，但一切还是要看视觉设计师的设计稿来决定就是了，请各位有个心理准备就好罗。

这两个简单的属性，却是众多新手跑版的原因，看似简单却又细节不少，几个小小的重点就请金鱼们小心且注意了，金鱼都能懂的 CSS 必学属性，我们下篇见！

「金鱼都能懂的CSS选取器」已集结成书，并於书中添加一些新篇章及细节补充，有兴趣的朋友可至天珑书局选购，感谢各位支持
购书连结 https://www.tenlong.com.tw/products/9789864344994?list_name=b-r30-zh_tw

让我们好好善用CSS选取器吧