Css 内联块元素的恼人空格

因此，当我将显示设置为

inline block

时，页面上的元素似乎添加了一些空白。有没有办法在不将行高更改为

0px

或将显示类型更改为

block

并手动设置宽度的情况下消除此空白？我可能希望下面的红色元素在将来根据内容动态扩展

这就是我想要的（红色下方没有绿色）：

这就是我得到的（红色下方的绿色）：

---

这里有一个问题：问题是您的

.logo\u容器上有
溢出：隐藏
。删除此选项将删除元素底部的4个像素

然后您只需使用
.brand\u logo\u icon
上的
height:auto
（高度的默认值）即可根据其内容进行扩展

这可以从以下几点看出：


正文{
背景：rgb（40,40,40）；
字体系列：Helvetica、Arial、无衬线字体；
字体重量：较轻；
用户选择：无；
-moz用户选择：-moz无；
-webkit用户选择：无；
保证金：0；
游标：默认值；
颜色：rgb（60,60,60）；
}
div{
框大小：边框框；
}
@支架（填充：最大（0px））{
.集装箱{
左侧填充：最大值（0px，环境（安全区域插图左侧））；
右侧填充：最大值（0px，环境（安全区域插图右侧））；
}
#导航集装箱{
左侧填充：最大值（0px，环境（安全区域插图左侧））；
右侧填充：最大值（0px，环境（安全区域插图右侧））；
}
}
#导航{
填充：0px；
显示：块；
背景：rgb（55,155,55）；
}
.品牌标志图标{
显示：块；
背景色：rgb（200,30,30）；
宽度：60px；
}
#导航标志链接{
位置：相对位置；
显示：块；
左：0；
右：0；
左边距：自动；
右边距：自动；
宽度：45px；
}
#导航集装箱{
显示：块；
最大宽度：1300px；
左：0；
右：0；
左边距：自动；
右边距：自动；
}
#导航。导航容器。标识容器{
显示：内联块；
填充：0px；
背景：rgb（80,80,80）；
边界半径：0px 0px 5px 5px；
左边距：10px；
右边距：10px；
边缘底部：0px；
}
#导航。导航容器。品牌标志图标{
宽度：70px；
}
.集装箱{
显示：块；
左：0；
右：0；
左边距：自动；
右边距：自动；
边际上限：0px；
过渡：边缘225ms线性；
}
.容器.飞溅物：之前{
内容：“；
显示：块；
垫面：56.2%；
}
.容器.飞溅物{
位置：相对位置；
显示：块；
宽度：90vw；
最大宽度：1300px；
左：0；
右：0；
左边距：自动；
右边距：自动；
边缘顶部：50px；
文本对齐：居中；
}
.容器.飞溅.飞溅{
显示：块；
位置：绝对位置；
左：0px；
右：0px；
顶部：0px；
底部：0px；
背景大小：100%；
背景重复：无重复；
不透明度：0；
}
.容器.内容{
显示：块；
位置：相对位置；
左：0；
丰富度：0；
左边距：自动；
右边距：自动；
最大宽度：1300px；
不透明度：1；
动画：动画400毫秒缓进，缓出0毫秒向前；
垂直对齐：顶部；
空白：0；
字体大小：0px；
}
.container.content.c{
文本对齐：居中；
}
.container.content.home\u img:之前{
内容：''；
显示：块；
垫顶：56%；
}
.container.content.home\u img{
显示：块；
背景色：rgb（30,30,90）；
}
.container.content.item_块{
显示：内联块；
宽度：50%；
填充：10px；
垂直对齐：顶部；
框大小：边框框；
文本对齐：居中；
}
.container.content.item_block.海报：之前{
内容：''；
显示：块；
填充顶部：151%；
}
.container.content.item_block.poster.sqr:before{
填充顶部：100%；
}
.container.content.item_block.poster{
显示：块；
最大宽度：550px；
背景位置：中心；
背景大小：100%；
背景重复：无重复；
背景图片：url（'/assets/no_poster.png'）；
左：0；
右：0；
左边距：自动；
右边距：自动；
}

美国广播公司
额外的空间来自盒子模型，用于布置“内联”元素，包括所有内联块或内联元素。它看起来像伏都教，因为你在盒子模型中看不到它所涉及的元素。如果设置
字体大小：0在
.nav_容器上
它会消失。
我只添加了
溢出：隐藏对于演示，颜色不会溢出圆形边框，实际使用中没有。哦，我想你误解了-我希望圆角和绿色显示在那里，但我不希望绿色显示在红色框平边下方的像素中。所以你希望红色框有圆形边缘（
.brand-logo\u icon
）元素，但“间隙”必须是来自父级
的灰色。logo\u容器
？在这种情况下，您只需将
边框半径从
.logo\u容器
移动到
。brand-logo\u icon
本身：）如果有另一个div将包含logo的文本，则不会。标志和文本的整个容器将有圆形的跳线。红色用于对比，实际上是正在使用的图像。
vertical align:top到内联块element@TemaniAfif哇，谢谢。完美的解决方案。令人沮丧的是，苏并不总是有效地提出相关问题。我想现在至少有一种新的搜索方式：P