代码之家 › 专栏 › 技术社区 › Tom Bom

为什么父div和子div的高度不一样?[副本]

css html

Tom Bom · 技术社区 · 6 年前

我有一个链接,看起来像一个按钮,我想设置背景颜色不同。

但是,我不明白为什么 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>

3 回复 | 直到 6 年前

Obsidian Age 6 年前

你需要添加 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 设置,并且不尊重垂直填充和边距。

arkhi 6 年前

<a> 标记默认值 display inline ,所以它的父母会 display it vertically along its line box 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;
}

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

George 6 年前

因为默认情况下 a 标签将具有 display: inline; 所以一定要把 anchor 标记到 display: inline-block; display: block;

推荐文章

Softly · 单选按钮未按预期取值

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Thirumal isireddy · 在导航栏顺风css中,img被扭曲,而不是将元素推到旁边

1 年前

eXor420 · 如何在脚本标记中使用导出的函数?

1 年前

Hadi · 如何在无效和有效输入中选择用于更改样式的psoudo元素(after)

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Kernier · 如何将数学公式支持添加到StacksEditor?

1 年前

Md. Ibrahim · CSS网格项溢出小屏幕滚动

1 年前

Arjun V Srivatsa · 如何将系统时区信息分配给javascript中的变量?

1 年前

Akshay mek · Vscode扩展建议不适用于某些文件夹

1 年前