如何使元素的边距和宽度相同？

Posted 2023-03-06

【中文标题】如何使元素的边距和宽度相同？

【英文标题】：How to make elements the same margins and width?

【发布时间】：2013-09-10 17:47:18

【问题描述】：

<div id="divL">
<input name="email" type="text" placeholder="input text">
<div class="divInput">divInput</div>
<div class="divtxt">divtxt</div>
<input name="sname" type="text" placeholder="input text">
<select name="srodstvo">
    <option value="1">select</option>
    <option value="2">323</option>
</select>
<div class="divtxt">divtxt</div>

</div> 

CSS

*
    margin:0;
    padding:0;

#divL
    width:45%;
    margin:5vh 0 0 5vw;
    border:thin solid blue;

input[type="text"], .divtxt, .divInput, select
    width:100%;
    margin:4px 0;
    padding:4px;
    border:thin solid #999;
    border-radius:3px;

所有元素都有相同的边距、内边距和宽度。但是第二端和第三个元素之间的距离不同，select 更短！？

小提琴是here

【参考方案1】：

这是由于Box-Sizing。 Input 的 box-sizing 是 content-box，而 select 默认情况下 border-box 是 box-sizing。因此，您可以通过将其添加到您的标记来更改选择的 box-sizing 属性

select

   box-sizing:content-box;

如果不设置此属性，select 的高度小于其他元素（在 Chrome 中）。

还有一件事是在设置后你的元素仍然在父容器之外。这是因为您将他们的width=100% 与padding : 4px 放在一起，这使得它们大于父级的100%。因此，只需从左右设置 0 填充即可。

Padding:4px 0;

对于第三个元素中的不均匀边距添加

display:inline-block;

Update Js Fiddle

【讨论】：

萨钦，你试过了吗？没有结果。

@SunSky 看看 jsFiddle 示例

看着你的小提琴。视觉上没有任何变化。

@DavidStarkey 查看选择的宽度。它与其他元素相同，但它不在发布的元素中

不是，所有的宽度都和OP一模一样。至少在 Firefox 23.0.1 中是这样的。

【参考方案2】：

尝试将第二个值添加到padding

padding:4px 0;

Fiddle

在 Firefox 23 中测试

更新：

要固定元素 2 和 3 之间的边距，请将所有 4 个边设置为 padding

margin:4px 0 0 0;

要保持底部间距，请在外部div 中设置padding

padding:0 0 4px 0;

Updated fiddle

【讨论】：

第二个和第三个元素的距离更小了！

原来如此。我很害怕注意到这样的事情：P

@SunSky 好的，现在就试试吧。

大卫，但我也需要底部边距。使用margin:4px 0 4px 0 - 不起作用。似乎解决方案是display:inline-block，虽然我不明白为什么。无论如何，非常感谢。假设解决了

【参考方案3】：

要固定宽度，请添加此CSS 规则：

input, select

    box-sizing: content-box;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;

要修复边距：将display: inline-block 添加到...

input[type="text"], .divtxt, .divInput, select

    width:100%;
    margin:4px 0;
    padding:4px;
    border:thin solid #999;
    border-radius:3px;
    display: inline-block;

它正在运行：http://jsfiddle.net/leniel/Y5aVB/4/embedded/result/

【讨论】：

Leniel，解决了，谢谢。但是你能解释一下吗？为什么我需要display:inline-block 来设置边距？

那是因为你有不同类型的元素：<div>s 和 <input>s 和 margin 对它们的影响不同。做display:inline-block 你强迫他们表现得平等。有关display 属性的更多信息，请参见此处：w3schools.com/cs-s-ref/pr_class_display.asp