你稱之爲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>