CSS边距：为什么这种布局的行为是这样的？ [英] CSS margins: Why does this layout behave this way?

问题描述

我试着教自己一些CSS目前。

我已经做了这个示例布局：

  .group div {width： 100px; height：100px;背景颜色：橙色display：inline-block; text-align：center; line-height：100px; font-size：3em; font-weight：bold;颜色：白色; margin：10px;}。wrap {width：500px; height：120px; background-color：#efefef;}  

 < div class =wrap> < div class =group> < div> 1< / div> < div> 2< / div> < div> 3< / div> < div> 4< / div> < / div>< / div>  

<内部的元素都是100px宽度加上10px margin-left和10px margin-right。总和高达120像素。 4倍120像素使480像素。

=>它应该适合宽度为500px的wrap-element。

't。第四个元素分成一个新行。我必须将宽度增加到510，以适合它。

为什么？

即使使用firebug，我找不到原因...

解决方案

-block s类似于字符，这意味着空间也计入宽度。删除 div 之间的空格/新行以获得什么。或者切换到其他布局方法，如 float：left 。

I try to teach myself some CSS currently.

I have made this example-layout:

.group div {
  width: 100px;
  height: 100px;
  background-color: orange;
  display: inline-block;
  text-align: center;
  line-height: 100px;
  font-size: 3em;
  font-weight: bold;
  color: white;
  margin: 10px;
}

.wrap {
  width: 500px;
  height: 120px;
  background-color: #efefef;
}

<div class="wrap">
  <div class="group">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
</div>

The div-elements within are all 100px width plus 10px margin-left and 10px margin-right. Sums up to 120px. 4 times 120px makes 480px.

=> It should fit into the wrap-element which has a width of 500px.

But it doesn't. The fourth element breaks into a new line. I have to increase the width to 510 for to fit it into one line.

Why?

Even with firebug I couldn't find a reason ...

解决方案

inline-blocks are like characters, which means spaces are counted in the width too. Remove spaces/new lines between divs to get what you what. Or switch to other layout method, like float: left.

这篇关于CSS边距：为什么这种布局的行为是这样的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！