即使宽度和高度相同，为什么不同元素的尺寸不同？

为什么有些元素稍大于其他元素？例如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

即使宽度和高度相同，为什么不同元素的尺寸不同？

回答

相关问题