padding和margin
•发布于   •作者 狂暴的猛牛  •471 次浏览  •来自 问答

这两天大家应该都被padding和margin摆了一道,这两个属性对新手来说真的不太友好。padding和margin有着本质的区别,可以说,这两个词根本不是同一个层面的属性。

首先padding是填补的意思,而margin是边缘的意思。知道这点就很容易明白,为什么一用到padding就会把所在的div撑大。拿200*100(宽*高)的div举例,如果用padding-top:10px,就会在top的边缘外再填补上200*10的框子,所以我们看到了整个框子变成200*110,虽然这样的确达到了子div距离父div-top10px;但是父div却变大了,为了保持父div的大小不变,只能将原先定的父div改成200*90。而且无论在哪条边上加padding,缩小的时候都会减少父div对面的那条边。意思就是padding-top,缩小父div长度的时候,从bottom那边缩小;padding-left,缩小就会在父div-right边(大小不够的时候子div会被撑出去,这个地方加入了float属性,我觉得很复杂)。我们最常用的是padding-top,由于很多情况下父div的顶部都被固定了,所以底边会被撑下去。

(用divf代表“父div”,用divs表示“子div”)

接着上面的类容,margin是边与边的距离。margin要比padding活跃很多,更让人摸不清和难以理解。

例如一个200*200的divf里面有个100*100的divs。divs初始在divf的左上角。这是时候用divs-top:10px就会连带使divf也一起往下拉10px,而divs和divf的top边仍然是重合的,没有达到divs-top边距离divf-top边10px的效果。所以结合padding的最后一句,这时候只能使用padding-top来实现divf-top和divs-top分开的效果,所以也就出现了padding-top使用最多的情况。top边是个特殊情况,重合的时候不能使用margin-top。divs-margin-top会默认选择非divf-top为参照的一条边并带着divf向下移动,以保证divs在divf中的绝对位置不变。这时候,使用divs-margin-top和divf-margin-top效果一模一样。同样是重合,divs-margin-left不等于divf-margin-left,情况就符合逻辑思维的。

如果想使用divs-margin-top;在divs中加个float属性,就可以用了,这时候逻辑才正常。我们的作业当中基本divs都有float属性,所以很难发现margin会在top上出问题。

我一共测试了3个多小时,也没发现通用的规则。总结一下可以用到的法则是:

1.padding一定会把div撑大;

2.margin不会改变父div的位置和大小,会把自己撑出父div,但是别在top边重合的时候使用,除非加了float。

3.自己最好去测试一下这些情况,buttom边我没有测试,完全空白。

(以上都是我测试的结果,只代表个人观点。) 


1 回复
狂暴的猛牛

我不知到是不是和div的绝对位置和相对位置有关系。

回到顶部

©2017 Powered by 三十三行伪代码
皖ICP备17005175号-3