margin默认状态下有一定间距
2018-10-04 本文已影响0人
newway_001
对于一个有强迫症的人来说，发现两个p元素之间的间距比我预想的要大一点。。。我不能接受这一误差。。
拿代码跑了一下。。
<head>
<style>
p.ex1 {margin-bottom:2cm}
</style>
</head>
<body>
<p class="ex1">一个底边距为2厘米的段落。</p>
<p>一个没有指定边距大小的段落。</p>
<p>一个没有指定边距大小的段落。</p>
<p>一个没有指定边距大小的段落。</p>
<p>一个没有指定边距大小的段落。</p>
</body>
bottom.PNG
我想会不会和padding有关。于是：
<head>
<style>
p.ex1 {margin-bottom:2cm}
p{padding:0;}
</style>
</head>
<body>
<p class="ex1">一个底边距为2厘米的段落。</p>
<p>一个没有指定边距大小的段落。</p>
<p>一个没有指定边距大小的段落。</p>
<p>一个没有指定边距大小的段落。</p>
<p>一个没有指定边距大小的段落。</p>
</body>
padding.PNG
和没有padding：0；效果一样，于是我将margin：0；扔进代码：
<head>
<style>
p.ex1 {margin-bottom:2cm}
p{margin:0;}
</style>
</head>
<body>
<p class="ex1">一个底边距为2厘米的段落。</p>
<p>一个没有指定边距大小的段落。</p>
<p>一个没有指定边距大小的段落。</p>
<p>一个没有指定边距大小的段落。</p>
<p>一个没有指定边距大小的段落。</p>
</body>
margin.PNG
所以，我觉得在要求精确的前提下，margin-bottom定位效果不好。。。可以改用margin:0 0 2cm 0；代替。。。
另外margin-bottom的值是相对于同级的元素而言的，对于父元素，用top，bottom。。
