如何根据Navbar高度调整Button高度？附HTML/CSS代码示例

首先咱们先拆解下现有代码里导致高度不匹配的核心问题：导航栏里的<a>标签和<button>元素默认的盒模型（内外边距、行高）不一样，再加上按钮里嵌套了自带上下外边距的<p>标签，直接把按钮高度给撑歪了。接下来一步步调整就能完美适配：

1. 先清理冗余嵌套和默认样式 #

先把按钮里的<p>标签去掉，它的默认外边距是高度不一致的元凶之一，直接把文本放在按钮里就行：

<div class="topnav">
  <a class="active" href="#home">Hooligans</a>
  <button class="button">drop dead</button>
</div>

2. 统一导航栏内元素的高度与对齐逻辑 #

给导航栏设置明确的高度（或用内边距灵活控制），再通过Flex布局让内部元素自动垂直居中，同时强制链接和按钮的高度与导航栏完全匹配：

.topnav {
  background-color: #F9FAFA;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  overflow: hidden;
  /* 固定导航栏高度，也可以用padding: 12px 0; 实现更灵活的响应式高度 */
  height: 48px;
  /* 用Flex布局让元素横向排列+垂直居中 */
  display: flex;
  align-items: center;
}

/* 导航栏链接样式调整 */
.topnav a {
  float: none; /* 用了Flex就不需要float了 */
  color: #BA55D3;
  text-align: center;
  padding: 0 16px; /* 只保留左右内边距，上下靠Flex居中 */
  text-decoration: none;
  height: 100%; /* 让链接高度和导航栏完全一致 */
  display: flex;
  align-items: center; /* 保证链接文本垂直居中 */
}

/* 按钮样式调整 */
.topnav .button {
  background: transparent; /* 去掉默认按钮背景，也可以自定义颜色 */
  border: none; /* 移除默认按钮边框 */
  color: #BA55D3; /* 和链接文字颜色统一，也可以单独设置 */
  font-family: courier;
  padding: 0 16px;
  height: 100%; /* 强制按钮高度与导航栏匹配 */
  cursor: pointer;
  display: flex;
  align-items: center;
  /* 清除按钮默认的内外边距 */
  margin: 0;
}

/* 可选：给按钮加hover效果，和链接保持视觉统一 */
.topnav .button:hover {
  background-color: rgba(186, 85, 211, 0.1);
}

3. 更灵活的替代方案：用内边距控制高度 #

如果不想用固定高度，推荐用上下内边距来定义导航栏高度，这样元素会自动适配，更适合响应式场景：

.topnav {
  background-color: #F9FAFA;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  overflow: hidden;
  padding: 12px 0; /* 上下内边距直接控制导航栏高度 */
  display: flex;
  align-items: center;
}

.topnav a, .topnav .button {
  padding: 0 16px;
  /* 不需要额外设置高度，内边距已经撑起导航栏，Flex保证垂直居中 */
}

这样调整后，导航栏的链接和按钮高度就完全适配了，文本也都是垂直居中的，视觉上会非常统一。

内容的提问来源于stack exchange，提问作者0decimal0