Answer by Dharmik Gohil for How to disable margin-collapsing?
Try{ display:flex; flex-direction:column;}or{ display:grid;}
View ArticleAnswer by GorvGoyl for How to disable margin-collapsing?
To prevent margin collapsing between siblings, add display: inline-block; to one of the siblings (one is enough though you can add it to both).
View ArticleAnswer by Chuanqi Sun for How to disable margin-collapsing?
CSS*Fixesdisplay: flow-root;✅ Parent element collapse❌ Sibling element collapsedisplay: flex;flex-direction: column;✅ Parent element collapse✅ Sibling element collapse*Modern browsers (excluding IE11)...
View ArticleAnswer by Daniel Koster for How to disable margin-collapsing?
Actually, there is one that works flawlessly:display: flex;flex-direction: column;as long as you can live with supporting only IE10 and up.container { display: flex; flex-direction: column; background:...
View ArticleAnswer by Whisher for How to disable margin-collapsing?
For your information you could usegrid but with side effects :).parent { display: grid}
View ArticleAnswer by Buksy for How to disable margin-collapsing?
I had similar problem with margin collapse because of parent having position set to relative. Here are list of commands you can use to disable margin collapsing. HERE IS PLAYGROUND TO TESTJust try to...
View ArticleAnswer by Hesam for How to disable margin-collapsing?
I know that this is a very old post but just wanted to say that using flexbox on a parent element would disable margin collapsing for its child elements.
View ArticleAnswer by Nicu Surdu for How to disable margin-collapsing?
One neat trick to disable margin collapsing that has no visual impact, as far as I know, is setting the padding of the parent to 0.05px:.parentClass { padding: 0.05px;}The padding is no longer 0 so...
View ArticleAnswer by Dan Carter for How to disable margin-collapsing?
Every webkit based browser should support the properties -webkit-margin-collapse. There are also subproperties to only set it for the top or bottom margin. You can give it the values collapse...
View ArticleAnswer by Blackgrid for How to disable margin-collapsing?
You can also use the good old micro clearfix for this.#container::before, #container::after{ content: ''; display: table;}See updated fiddle: http://jsfiddle.net/XB9wX/97/
View ArticleAnswer by HQCasanova for How to disable margin-collapsing?
There are two main types of margin collapse:Collapsing margins between adjacent elementsCollapsing margins between parent and child elementsUsing a padding or border will prevent collapse only in the...
View ArticleAnswer by Litek for How to disable margin-collapsing?
overflow:hidden prevents collapsing margins but it's not free of side effects - namely it... hides overflow.Apart form this and what you've mentioned you just have to learn live with it and learn for...
View ArticleHow to disable margin-collapsing?
Is there a way to disable margin-collapsing altogether? The only solutions I've found (by the name of "uncollapsing") entail using a 1px border or 1px padding. I find this unacceptable: the extraneous...
View Article
