gpt4 book ai didi

html - 内部 div 调整外部 div 的边距大小

转载 作者:行者123 更新时间:2023-12-02 03:45:54 25 4
gpt4 key购买 nike

我有一个 div,其高度由 encolsed div 决定。问题是,当我在顶部添加一些额外的边距时,封装 div 会正确调整大小。当我在底部添加边距时,似乎只有封闭的 div 框模型受到影响,而封闭的 div 则不受影响。

HTML

<div style="height:100px;background-color:#adadbb">
IRRELEVANT THINGS HERE
</div>

<div class="dynamicDiv">
<span> title</span>
<div class="card">
Content here
</div>
</div>

<div style="height:100px;background-color:#adadbb">
IRRELEVANT THINGS HERE VOL 2
</div>

CSS

.dynamicDiv{
background-color:yellow;
}

.card{
height:15vh; //an example of the height for this card. could be anything.
margin-top:10px;
margin-bottom:10px;
}

看来这与<span> title</span>有关。元素就像我在底部添加一个元素一样工作,就像我期望的那样(除非跨度为空,在这种情况下,事物呈现为好像跨度不存在一样)。

我不太明白为什么会发生这种情况,所以如果它明显与盒子模型有关,请告诉我。非常感谢。

在这里摆弄:

https://jsfiddle.net/d88yr4yw/

P.S:我想要实现的是拥有一个始终与所包含的 div 高度一样高的 div + 顶部和底部边距 + 那里可能存在的任何其他元素。我宁愿我不必硬编码任何高度,如果不是不可能解决这个问题的话。

最佳答案

一个快速的解决方法是在外部 div 上使用:

overflow:auto,

padding-top:1px; margin-top:-1px;

边距在内部 div 上的工作方式是违反直觉的。比我聪明得多的人在这里讨论了这个问题:

Margin on child element moves parent element

如果您阅读该链接上的评论,您会发现很多人对这个奇怪的“规则”也不是特别满意!

我使用溢出:自动技术对 fiddle 进行了更改(删除了顶部的跨度,并且边距仍然保留):

https://jsfiddle.net/ps9na82r/

关于html - 内部 div 调整外部 div 的边距大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46757250/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com