Question

在这个网站http://exact-mats.myshopify.com/，我们希望徽标上方的空白高度等于其下方空白的高度。

我无法找到CSS规则来实现这一目标。

我可以看到我们需要在

中定位

<nav class="top-menu">
 ....
   <div class="row">

我错过了什么？我改变了什么CSS？

感谢。

Answer 1

添加

 padding-bottom: 0;

表示div下方的行

<div class="free-shipping">Free shipping on all orders</div>

当我检查并添加padding-bottom: 0;

时，它确实有效

Answer 2

从标签中删除边距底部，然后在<div class="car-search"></div>

中选择

.car-search label, .car-search select  {margin-bottom: 0}

Answer 3

将高度设置为＆＃34; .large-menu-container＆＃34;的父div。这是＆＃34; .row＆＃34;如果你不想修改＆＃34; .row＆＃34;或者只是添加另一个父母。我将高度设置为75px，它的工作原理。当您使用＆＃34; height: 100%;＆＃34;在元素上，其父元素必须具有预定义的高度才能工作。

然后你必须调整带有边距/填充顶部的选择标记

Answer 4

Snapshot of new CSS

添加 margin-bottom：-30px; In

.top-menu .row { 最大宽度：82.5rem; }

exact-mats.myshopify.com css

如果由于使用第三方CSS而无法更改css，那么

添加新的CSS类
1。您展示徽标的每个页面
2。或者，如果可以，将此类添加到自定义.css文件。

.top-menu .row { margin-bottom：-30px; ！important }

注意：我宁愿建议增加顶部导航上方的空白高度，这样看起来比减少它下面的空间要好。要做上面的事情。添加以下CSS。

.top-menu .row { padding-top：31px！important; }

如何减少topnav下的空白区域？

4 个答案: