css 如何更改导航栏中的顶部填充？

jk9hmnmh 于 2023-10-21 发布在其他

关注(0)|答案(2)|浏览(117)

我有一个导航栏，但每当我悬停的顶部和底部总是扩大。如果我加上height=100px，它仍然不会改变。

#navbar {
  display: flex;
  justify-content: space-between;
}

.nav {
  margin: 1px auto;
  padding: 2px 6px;
}

.nav:hover {
  background-color: #84a98c;
}

<div id="navbar">
  <div class="nav">
    <h3>Home</h3>
  </div>
  <div class="nav">
    <h3>About</h3>
  </div>
  <div class="nav">
    <h3>Tools</h3>
  </div>
  <div class="nav">
    <h3>Contact</h3>
  </div>
</div>

css

来源：https://stackoverflow.com/questions/76944574/how-do-i-change-the-top-padding-in-a-navbar

2条答案

按热度按时间

cigdeys31#

覆盖默认CSS

这个问题是由h3元素的默认CSS引起的。默认情况下，它们具有margin-block-start: 1em;和margin-block-end: 1em;属性。
要解决您的问题，只需设置：

h3 {
  margin:0;
}

赞(0）回复(0）举报 2023-10-21

zc0qhyus2#

只需调整衬垫顶部

代码

#navbar {
    display: flex;
    justify-content: space-between;
}

.nav {
    margin: 0; /* Reset margin */
    padding: 10px 6px 2px 6px; /* Adjust top padding here */
    height: 100px; /* Fixed height */
}

.nav h3 {
    margin: 0; /* Reset margin */
}

.nav:hover {
    background-color: #84a98c;
}

赞(0）回复(0）举报 2023-10-21

我来回答

css 如何更改导航栏中的顶部填充？

2条答案

覆盖默认CSS

代码

相关问题

热门标签

最新问答