带有显示块的锚标记不占用其父容器的空间答案

【问题标题】：Anchor tag with display block not taking space of its parent container带有显示块的锚标记不占用其父容器的空间
【发布时间】：2022-09-23 22:53:36
【问题描述】：

我有一个父 div 包含两个元素，一个 small 标签和一个 a 标签。目前，我们可以看到父包装器具有高度和宽度。

现在，我需要删除small 标签，同时保留a 标签占用的空间。我尝试将display: block 和display: inline-block 都应用于锚标记，但是一旦删除small 标记，父包装器就会崩溃。

任何帮助将不胜感激。

https://jsfiddle.net/jghdewqv/

.wrapper {
    background-color: lightblue;
}

a {
    background-color: firebrick;
    display: block; /* Also tried inline-block */
    float: right;
}

small {
    background-color: pink;
}

<div class=\"wrapper\">
    <small>Left text here</small>
    <a href=\"#\">Some link here</a>
</div>

标签： css

【解决方案1】：

它不会塌陷只是没有高度height:20px;

https://jsfiddle.net/jghdewqv/

.wrapper {
    background-color: lightblue;
    height:20px;
}

a {
    background-color: firebrick;
    float: right;
}

small {
    background-color: pink;
}

<div class="wrapper">
    <a href="#">Some Link here</a>
</div>

【讨论】：