CSS：当父级没有边框时，页边距

发布于 2024-08-04 17:29:32 字数 902 浏览 8 评论 0原文

正如您在这张图片中看到的，我有一个橙色的div 位于绿色 div 内，没有顶部边框。橙色 div 的上边距为 30px，但它也将绿色 div 向下推。当然，添加顶部边框可以解决问题，但我需要绿色 div 为顶部无边框。我能做什么？

.body {
    border: 1px solid black;
    border-top: none;
    border-bottom: none;
    width: 120px;
    height: 112px;
    background-color: lightgreen;
}

.body .container {
    background-color: orange;
    height: 50px;
    width: 50%;
    margin-top: 30px;
}

<div class="header">Top</div>
<div class="body">
    <div class="container">Box</div>
</div>
<div class="foot">Bottom</div>

原文

As you can see in this picture, I've got an orange div inside a green div with no top border. The orange div has a 30px top margin, but it's also pushing the green div down. Of course, adding a top border will fix the issue, but I need the green div to be top borderless. What could I do?

.body {
    border: 1px solid black;
    border-top: none;
    border-bottom: none;
    width: 120px;
    height: 112px;
    background-color: lightgreen;
}

.body .container {
    background-color: orange;
    height: 50px;
    width: 50%;
    margin-top: 30px;
}

<div class="header">Top</div>
<div class="body">
    <div class="container">Box</div>
</div>
<div class="foot">Bottom</div>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

滥情稳全场 2024-08-11 17:29:32

您可以将 overflow:auto 添加到 .body 以防止边距折叠。请参阅http://www.w3.org/TR/CSS2/box。 html#collapsing-margins

回复收藏 0 原文

黯然 2024-08-11 17:29:32

你所经历的是利润崩溃。边距并不指定元素周围的区域，而是指定元素之间的最小距离。

由于绿色容器没有任何边框或填充，因此没有任何内容可以包含橙色元素的边距。顶部元素和橙色元素之间使用边距，就像绿色容器具有边距一样。

在绿色容器中使用填充，而不是在橙色元素上使用边距。

回复收藏 0 原文

墨小沫ゞ 2024-08-11 17:29:32

使用 padding 而不是 margin：

.body .container {
    ...
    padding-top: 30px;
}

Use padding instead of margin:

.body .container {
    ...
    padding-top: 30px;
}

回复收藏 0 原文

提赋 2024-08-11 17:29:32

不确定这是否适用于您的情况，但我刚刚通过以下 CSS 属性解决了这个问题

#element {
    padding-top: 1px;
    margin-top: -1px;
}

#element 被下推，因为它的第一个子元素有一个 margin-top: 30px.有了这个 CSS，它现在可以按预期工作:) 不确定它是否适用于所有情况，YMMV。

Not sure if this will work in your case, but I just solved this with the following CSS properties

#element {
    padding-top: 1px;
    margin-top: -1px;
}

#element was being pushed down because it's first child element had a margin-top: 30px. With this CSS, it now works as expected :) Not sure if it'll work for every case, YMMV.

回复收藏 0 原文

迷你仙 2024-08-11 17:29:32

您可以在绿色框上添加 padding-top: 30，在橙色框上使用 top: 30px 进行相对定位，或者浮动橙色框并使用相同的 <代码>页边距：30px。

回复收藏 0 原文

情泪▽动烟 2024-08-11 17:29:32

您阅读了这份文档：
盒子模型 - 边距折叠

CSS

.body {
    border: 1px solid black;
    border-bottom: none;
    border-top: none;
    width: 120px;
    height: 112px;
    background-color: lightgreen;
    padding-top: 30px;
}

.body .container {
    background-color: orange;
    height: 50px;
    width: 50%;
}

You read this document:
Box model - Margin collapsing

CSS

.body {
    border: 1px solid black;
    border-bottom: none;
    border-top: none;
    width: 120px;
    height: 112px;
    background-color: lightgreen;
    padding-top: 30px;
}

.body .container {
    background-color: orange;
    height: 50px;
    width: 50%;
}

回复收藏 0 原文