删除内联块元素周围的默认空白区域

Question

如果我有以下代码：

<div class="inline"></div>
<div class="inline"></div>

.inline {
  display: inline-block;
  height: 100px;
  width: 100px;
  background: red;
}

你会注意到divs周围似乎还有一些默认的空白区域。我能解决这个问题的唯一方法是：

<div class="inline"></div><div class="inline"></div>

这让我的标记看起来不整洁。我可以在CSS中解决这个问题吗？

Answer 1

请看一下非常好的文章，其中包含几种不同的方法：https://css-tricks.com/fighting-the-space-between-inline-block-elements/并为您选择最好的杉木。

Answer 2

你可以通过将它们包裹在flex-box内来实现这一点 为他们创建父级并将display: flex提供给父级将起作用

＆＃13;

＆＃13;

.inline {
  display: inline-block;
  height: 100px;
  width: 100px;
  background: red;
}
.container{
  display: flex;
}

＆＃13;

<div class="container">
  <div class="inline"></div>
  <div class="inline"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以尝试在div容器中添加0字体大小。但是您需要单独更改div中的其他字体大小：

<强> CSS

<div class="container">
    <div class="inline"></div>
    <div class="inline"></div>
</div>

<强> HTML

@IBAction func myButton(sender: UIButton){
    //animation that zoom the button icon in and out
}

可以找到工作小提琴HERE 。

不是一个完美的解决方案。但这对我有用。 另一种解决方案是您上面提供的解决方案。