css - 为什么在 css 框模型中 100% 宽度不是 100%？

标签 css

<分区>

想象一下关于该问题的以下示例:

HTML:

<div id="wrapper">
  <div class="col">col1</div>
  <div class="col">col2</div>
  <div class="col">col3</div>
  <div class="col">col4</div>
</div>

CSS:

body, html {
  margin: 0;
  padding: 0;
}

#wrapper {
  margin: 0;
  padding: 0;
}

.col {
  width: 25%;
  display: inline-block;
}

这些内部 div 应该都在同一行，但它们不是。我的意思是 4 * 25% = 100%，对吧？

最佳答案

这是因为您的 HTML 中有空格和换行符。

body, html {
  margin: 0;
  padding: 0;
}

#wrapper {
  margin: 0;
  padding: 0;
}

.col {
  width: 25%;
  display: inline-block;
}

<div id="wrapper"><div class="col">col1</div><div class="col">col2</div><div class="col">col3</div><div class="col">col4</div></div>

关于css - 为什么在 css 框模型中 100% 宽度不是 100%？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43846377/