你称之为2个P块元素之间的垂直间距是什么？

Question

你在html 2 P block元素之间的垂直间距是多少？他们是利润率？但是将P元素的边距设置为0并不能完全消除间距？利润空间消除了空间，但这似乎没有道理。看起来剩下的空间是填充？

例如，

<p>Paragraph 1</p> 
<p>Paragraph 2</p> 

Answer 1

两个div的不具有它们之间的任何空间，2 p确实，这是一个默认的保证金，某些类型的元的都有，像p，h3等

如果一个边框添加到每个人，很显然它是如何呈现的，如果到边距设置为0，与过去两年p的完成，空间消失。

这额外内空间，文本和边框之间，属于字体和变化基础上的字体大小，可以看出是在h3

这内字型空间可以是不同的与line-height有所控制，如图所示在最后两个div的

div, p, h3 { 
 
    border: 1px solid gray; 
 
} 
 

 
p ~ p ~ p { 
 
    margin: 0; 
 
} 
 

 
div ~ div ~ div { 
 
    line-height: 40px; 
 
}

<div>Some text in a div</div> 
 
<div>Some text in a div</div> 
 

 
<br> 
 

 
<p>Some text in a p</p> 
 
<p>Some text in a p</p> 
 

 
<br> 
 

 
<h3>Some text in a h3</h3> 
 
<h3>Some text in a h3</h3> 
 

 
<br> 
 

 
<p>Some text in a p (has margin set to 0)</p> 
 
<p>Some text in a p (has margin set to 0)</p> 
 

 
<br> 
 

 
<div>Some text in a div (that has line height)</div> 
 
<div>Some text in a div (that has line height)</div>

Answer 2

你是正确的 - 元件之间的垂直（和水平）的间距为所述余量。删除所有边距将删除元素之间的所有间距。见利润如何影响间距下面的例子：

#box1 { 
 
    margin: 0px; 
 
    display: block; 
 
    border: 2px solid red; 
 
} 
 

 
#box2 { 
 
    margin: 0px; 
 
    display: block; 
 
    border: 2px solid blue; 
 
} 
 

 
#box3 { 
 
    margin: 5px; 
 
    display: block; 
 
    border: 2px solid red; 
 
} 
 

 
#box4 { 
 
    margin: 5px; 
 
    display: block; 
 
    border: 2px solid blue; 
 
}

<pre>margin: 0px;</pre> 
 

 
<div id="box1">Box 1</div> 
 

 
<div id="box2">Box 2</div> 
 

 
<br><br> 
 

 
<pre>margin: 5px;</pre> 
 

 
<div id="box3">Box 3</div> 
 

 
<div id="box4">Box 4</div>