html - CSS 疯狂 inline-block 不可移动边距

标签 html css

<分区>

检查下面的代码:

为什么 div 之间有空格?我怎样才能删除它们(不使用 float )?

* {
  padding: 0px;
  margin: 0px;
}
.section {
  display: inline-block;
  width: 20%;
  min-height: 50px;
  box-sizing: border-box;
  border: solid 1px;
  /*float: left;*/
}
<div id="container">
  <div class="section">a</div>
  <div class="section">b</div>
  <div class="section">c</div>
  <div class="section">d</div>
  <div class="section">e</div>
</div>

最佳答案

有几种方法可以解决这个问题。我最喜欢的是:

* {
  padding: 0px;
  margin: 0px;
}

#container {
  letter-spacing: -0.32em;
}

.section {
  display: inline-block;
  width: 20%;
  min-height: 50px;
  letter-spacing: normal;
  box-sizing: border-box;
  border: solid 1px;
  /*float: left;*/
}

Here is a fiddle

关于html - CSS 疯狂 inline-block 不可移动边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26909357/

上一篇:html - 使用 CSS 将列一分为二

下一篇:html - 如何使用 Bootstrap 在响应式设计中创建大型菜单,例如

相关文章:

html - 通过 css 更改默认文本不起作用

html - 如何使用 VBA 单击网站上的组合框

HTML 导航栏缩放页面而不是移动内容

javascript - 显示点击的li并隐藏原始的

jquery - 带有 jquery 固定 header 的 firefox 和 internet explorer 中的错误

jquery - 在 Firefox 14.0.1 中使用 jQuery 获取 CSS 边框值

html - 获取元素中类的最后一个实例

jquery - 将滑动切换的元素保持在顶部

jquery - 仅使用 CSS 更改所选元素的 CSS 样式

html - 在我自己的样式表之前应用 Bootstrap 样式