即使寬度和高度相同，爲什麼不同元素的尺寸不同？

爲什麼有些元素稍大於其他元素？例如div設置爲寬度：200和高度：35，與輸入框的高度相同，寬度爲196，高度爲29。
實施例： 即使寬度和高度相同，爲什麼不同元素的尺寸不同？

div { 
 
    width:200px; 
 
    height:35px; 
 
    border:1px solid red; 
 
} 
 

 
input { 
 
    width:200px; 
 
    height:35px; 
 
    border:1px solid blue; 
 
} 
 

 
#inp1 { 
 
    opacity:.5; 
 
}

<h3>Both set to width:200px and height:35px</h3> 
 
<div>DIV</div> 
 
<input placeholder='Input'> 
 
<br> 
 
<h3>Overlapping comparison</h3> 
 
<div> 
 
    <input id='inp1'> 
 
</div>

來源

2016-08-30 Joshua

我複製你的代碼和他們看起來一模一樣。輸入是輸入字段右側的一個像素，下一個像素。這是我在兩者之間唯一的區別。對不起，如果我誤解了這裏的東西。也許你沒有box-sizing：border-box;組。 – Vcasso

因爲瀏覽器將自己的樣式應用於HTML元素。每個瀏覽器都有自己的[***默認樣式表***]（https://www.w3.org/TR/CSS22/sample.html）。您需要根據需要用自己的方式覆蓋這些樣式。 –

默認情況下，輸入元素具有一定的CSS-屬性，如輪廓寬度，間距等嘗試設置他們都爲0px，然後再試一次:)

來源

2016-08-30 21:39:33

輸入具有默認padding。將padding設置爲0，您將看到div和input將以相同的尺寸呈現！

div { 
 
    width:200px; 
 
    height:35px; 
 
    border:1px solid red; 
 
} 
 

 
input { 
 
    width:200px; 
 
    height:35px; 
 
    border:1px solid blue; 
 
    padding: 0; 
 
} 
 

 
#inp1 { 
 
    opacity:.5; 
 
}

<h3>Both set to width:200px and height:35px</h3> 
 
<div>DIV</div> 
 
<input placeholder='Input'> 
 
<br> 
 
<h3>Overlapping comparison</h3> 
 
<div> 
 
    <input id='inp1'> 
 
</div>

來源

2016-08-30 21:38:35

它也有助於使用框大小：跨網頁上的所有元素的邊框 – OzzyTheGiant

這是什麼？ – Joshua

即使寬度和高度相同，爲什麼不同元素的尺寸不同？

回答

相關問題