css 设置元素之间的间隙，而不向子元素添加边距或填充，同时显示设置为块

bmvo0sr5 于 2023-06-25 发布在其他

关注(0)|答案(1)|浏览(131)

想象一下，您正在处理一个无法大量修改的CSS。在这个CSS中，我们有一个父节点，其display类型是block。此节点水平显示子元素的列表。这里的问题是不能向这些子元素添加边距和填充，这意味着我们所能做的就是修改父节点而不触及display属性。在这种情况下，我们如何在子元素之间添加间隙？例如：

.content {
    display: block;
    // what can be added here to add gaps between the child elements?
    .child {
        float: left;
    }
}

我想强调的是，display类型不能更改为任何其他类型，并且不能对.child类进行任何更改。这可能吗

css

来源：https://stackoverflow.com/questions/76521310/setting-gaps-between-elements-without-adding-margin-or-padding-to-children-while

1条答案

按热度按时间

qkf9rpyu1#

要在子元素之间添加间隙而不修改子类或更改父节点的显示属性，可以使用：：after伪元素。通过应用明确：将both属性添加到父节点的：：after伪元素，则可以在子元素之间创建间隙。下面是一个如何实现此目标的示例：

.content {
    display: block;
    /* what can be added here to add gaps between the child elements? */
    &::after {
        content: "";
        display: table;
        clear: both;
    }

    .child {
        float: left;
    }
}

使用这种方法，您实际上是在子元素之后添加一个clearing元素，这将后续内容推到浮动子元素下面，从而导致子元素之间出现间隙。

赞(0）回复(0）举报 2023-06-25

我来回答

css 设置元素之间的间隙，而不向子元素添加边距或填充，同时显示设置为块

1条答案

相关问题

热门标签

最新问答