为什么父母div和孩子的身高不一样？

Question

我有一个看起来像按钮的链接，我想将背景色设置为不同。

但是，我不明白为什么我的holder div的身高与孩子的身高不一样。我没有考虑填充。

是否有解决此问题的干净方法？

.link {
  background-color: green;
  padding: .9rem 3rem;
}

.holder {
  background-color: red;
  text-align: center;
  margin-top: 40px;
}

<div class="holder">
  <a href="#" class="link">LINK</a>
</div>

Answer 1

您需要向display: inline-block元素中添加.link：

.link {
  background-color: green;
  padding: .9rem 3rem;
  display: inline-block;
}

.holder {
  background-color: red;
  text-align: center;
  margin-top: 40px;
}

<div class="holder">
  <a href="#" class="link">LINK</a>
</div>

默认情况下，<a>个元素是display: inline，并且其布局不会受到 the containing block 的影响。也就是说，它们不允许设置height或width，并且不考虑垂直填充和边距。

Answer 2

value="${cqDesign.type}"标签的默认<a>是display，因此其父标签将display it vertically along its line box（基于inline属性），您需要将其更改为vertical-align或display: block，取决于您要寻找的内容；

inline-block

.link {
  display: block;
  background-color: green;
  padding: .9rem 3rem;
}

.holder {
  background-color: red;
  text-align: center;
  margin-top: 40px;
}

Answer 3

由于默认情况下，a标签将具有display: inline;的属性，因此请确保将anchor标签更改为display: inline-block;或display: block;