<分区>
<分区>
我正在尝试创建四个显示在浏览器中间的灰色方 block 。
每个正方形的宽度设置为 40 像素，边框为 10 像素。
我使用 box_container在 <div> 中上课允许一些 CSS 将四个框居中。
如果我设置 box_container 的宽度类别为 240px , 只有 3 个框适合第一行。
我需要将宽度设置为 250px使所有四个框显示在一行中的最小值。 8个10px的border和4个40px的img框加起来就是240px(10px*8 + 40px*40 = 240px)是为什么？
<style type="text/css">
.boxes {
height: 40px;
width: 40px;
background-color: gray;
margin: 10px 10px 10px 10px;
}
.box_container {
width: 250px;
margin: 0 auto;
}
</style>
<div class="box_container">
<img class="boxes"></img>
<img class="boxes"></img>
<img class="boxes"></img>
<img class="boxes"></img>
</div>最佳答案
您的计算结果并非如此。每个 <img> 之间有空格标记，这可能会导致它溢出容器。
您可以通过将它们设为 float: left 来删除此空格在你的 CSS 中。
生成的代码在同一行中显示四个框:
<style type="text/css">
.boxes {
height: 40px;
width: 40px;
background-color: gray;
margin: 10px 10px 10px 10px;
float: left
}
.box_container {
width: 250px;
margin: 0 auto;
}
</style>
<div class="box_container">
<img class="boxes"></img>
<img class="boxes"></img>
<img class="boxes"></img>
<img class="boxes"></img>
</div>关于html - 所需 CSS 中的像素宽度比我预期的长 10px。为什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35376341/