влияет на родительское поле ⇐ CSS

1 сообщение • Страница 1 из 1

Гость

влияет на родительское поле

Цитата

Сообщение Гость » 04 мар 2024, 18:50

I have look for a while now on this problem and have not found a straight answer. When adding a margin top to an element, in my case it happens mostly with headings. In many occasions the margin-top is shared with the parent.

HTML

My title CSS

div{ padding:20px; } h1{ margin-top: 20px; } The result of the previous code will also add a margin-top to the div, as if we had the following:

div{ padding:20px; margin-top:20px; /this one is implemented by the browser, not written on the code/ } A way to solve this is by adding overflow:auto to the parent, in this case the div css has:

div{ padding:20px; overflow:auto; } Although the previous example solves the problem, it is not clear to me WHY???. This has something to do with "collapsing margins", where apparently a margin is combined with the parent's margin. But why????

How do we know when a parent will collapse the margin of the child and when not, what is the purpose of this property of the blocks, or is it a bug?

Here's a JSFiddle demo of the problem.

And Here is a JSFiddle demo of the solution

Thanks.

Источник: https://stackoverflow.com/questions/206 ... nts-margin

1709567436

Гость


I have look for a while now on this problem and have not found a straight answer. When adding a margin top to an element, in my case it happens mostly with headings. In many occasions the margin-top is shared with the parent.
 
[b]HTML[/b]
 
         My title       [b]CSS[/b]
 
div{   padding:20px; } h1{  margin-top: 20px; }  The result of the previous code will also add a margin-top to the div, as if we had the following:
 
div{   padding:20px;   margin-top:20px; /*this one is implemented by the browser, not written on the code*/ }  A way to solve this is by adding [b]overflow:auto[/b] to the parent, in this case the div css has:
 
div{   padding:20px;   overflow:auto; }  Although the previous example solves the problem, it is not clear to me [b]WHY???[/b]. This has something to do with [b]"collapsing margins"[/b], where apparently a margin is combined with the parent's margin. But [b]why????[/b]
 
How do we know when a parent will collapse the margin of the child and when not, what is the purpose of this property of the blocks, or is it a bug?
 
Here's a JSFiddle demo of the problem.
 
And Here is a JSFiddle demo of the solution
 
Thanks.
 

Источник: [url]https://stackoverflow.com/questions/20689575/css-margin-top-of-h1-affects-parents-margin[/url]