search
HomeWeb Front-endCSS TutorialReasons and solutions for firefox margin-top failure

Why should we translate this description? Someone has translated css2, but after looking at it, it’s very rough (I’m not saying that I’m the only one, the translator is really admirable!). Recently, I’ve come into more and more contact with css and xhtml, but the The more there are, the more confusion there is.
Now I feel that many problems cannot be called problems at all. The reason lies in our hasty understanding. For example, killing a chicken with a bull's knife is not impossible, but unreasonable and inappropriate. If the root cause is wrong, the appearance will be wrong. If When solving problems starting from the surface, it is inevitable that you will always be confused. As I said, you must be down-to-earth and don't be impetuous.
In this description, "collapsing margins" means: adjacent margin attributes between 2 or more box models (the relationship can be adjacent or nested) (there cannot be non-empty content between them) , padding area, border or using clear separation method) are combined and represented as a single margin.
In CSS2.1, horizontal margin will not be collapsed.
Vertical margins may be collapsed in some box models:
1. In regular document flow, adjacent vertical margins of 2 or more block-level box models will be collapsed.
The final margin value calculation method is as follows:
a. If all are positive values, take the largest one;
b. If they are not all positive values, take the absolute value, and then subtract the maximum value from the positive value;
c. There is no positive value value, then take the absolute value, and then subtract the maximum value from 0.
Note: Adjacent box models may be dynamically generated from DOM elements and have no adjacent or inheritance relationship.
2. In adjacent and model, if one of them is floated, the vertical margin will not be collapsed, even between a floating box model and its child elements.
3. The margin between the element with the overflow attribute set and its child elements will not be folded (except when the overflow value is visible).
4. For box models with absolute positioning (position:absolute) set, vertical margins will not be collapsed, even with their child elements.
5. For elements with display:inline-block set, the vertical margin will not be collapsed, even with their child elements.
6. If the upper and lower margins of a box model are adjacent, its margin may collapse through it. In this case, the position of the element depends on whether the margins of its adjacent elements are collapsed.
a. If the margin of an element and the margin-top of its parent element are collapsed together, the border definition of the border-top of the box model is the same as that of its parent element.
b. In addition, the parent element of any element does not participate in the folding of margin, or only the margin-bottom of the parent element participates in the calculation. If the element's border-top is non-zero, then the element's border-top position is the same as before.
The margin-top of an element that has a clear operation applied will never collapse with the margin-bottom of its block-level parent element.
Note that the position of elements that have been covered by the fold has no effect on the position of other elements that have been folded; the border-top border position is only necessary when laying out the child elements of these elements.
7. The vertical margin of the root element will not be collapsed.
The margin-bottom of a floating block-level element is always adjacent to the margin-top of the floated next in-flow block-level sibling element (floated next in-flow block-level sibling), unless that sibling element uses a clear operation.
The margin-top of a floating block-level element is adjacent to the margin-top of its first floated block-level child (floated first in-flow block-level child) (if the element has no border-top, no padding- top, and the child elements are not cleared).
If the margin-bottom of a floating block-level element meets the following conditions, then it is adjacent to the margin-bottom of its last floating block-level child element (if the element does not specify padding-bottom or border):
a. Specify Height:auto
b, min-height is less than the actual height of the element (height)
c, max-height is greater than the actual height of the element (height)
If the min-height attribute of an element is set to 0, then its The owned margins are adjacent, and it has neither border-top and border-bottom, nor padding-top and padding-bottom. Its height attribute can be 0 or auto, and it cannot contain an inline box model ( line box), the margins of all its floating child elements (if any) are also adjacent.
When the margin owned by an element is collapsed, and it uses the clear operation, its margin-top will be collapsed with the adjacent margin of the immediately following sibling element, but the result is that its margin will not be consistent with its block level The margin-bottom of the parent element is collapsed.
The folding operation is based on the values ​​of padding, margin, and border (that is, after the browser parses all these values). The folded margin calculation will overwrite the different margin values ​​that have been used.

<div id="d0" style="background-color:#333333;height:500px;"> 
<br style="line-height:0;"/> 
//不加入br这一行,在FIREFOX中id1的margin-top:20px将会在d0上作用,使d0上方与body间有20px的间距,d1与d0的上方没有间距,而IE内正常显示 
<div id="d1" style="background-color:#000000;margin-top:20px;height:100px;"></div> 
<div id="d2" style="background-color:#000000;margin-top:20px;height:100px;"></div> 
</div>

For more articles related to the causes and solutions of firefox margin-top failure, please pay attention to the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Demystifying Screen Readers: Accessible Forms & Best PracticesDemystifying Screen Readers: Accessible Forms & Best PracticesMar 08, 2025 am 09:45 AM

This is the 3rd post in a small series we did on form accessibility. If you missed the second post, check out "Managing User Focus with :focus-visible". In

Adding Box Shadows to WordPress Blocks and ElementsAdding Box Shadows to WordPress Blocks and ElementsMar 09, 2025 pm 12:53 PM

The CSS box-shadow and outline properties gained theme.json support in WordPress 6.1. Let's look at a few examples of how it works in real themes, and what options we have to apply these styles to WordPress blocks and elements.

Working With GraphQL CachingWorking With GraphQL CachingMar 19, 2025 am 09:36 AM

If you’ve recently started working with GraphQL, or reviewed its pros and cons, you’ve no doubt heard things like “GraphQL doesn’t support caching” or

Making Your First Custom Svelte TransitionMaking Your First Custom Svelte TransitionMar 15, 2025 am 11:08 AM

The Svelte transition API provides a way to animate components when they enter or leave the document, including custom Svelte transitions.

Classy and Cool Custom CSS Scrollbars: A ShowcaseClassy and Cool Custom CSS Scrollbars: A ShowcaseMar 10, 2025 am 11:37 AM

In this article we will be diving into the world of scrollbars. I know, it doesn’t sound too glamorous, but trust me, a well-designed page goes hand-in-hand

Show, Don't TellShow, Don't TellMar 16, 2025 am 11:49 AM

How much time do you spend designing the content presentation for your websites? When you write a new blog post or create a new page, are you thinking about

What the Heck Are npm Commands?What the Heck Are npm Commands?Mar 15, 2025 am 11:36 AM

npm commands run various tasks for you, either as a one-off or a continuously running process for things like starting a server or compiling code.

Building an Ethereum app using Redwood.js and FaunaBuilding an Ethereum app using Redwood.js and FaunaMar 28, 2025 am 09:18 AM

With the recent climb of Bitcoin’s price over 20k $USD, and to it recently breaking 30k, I thought it’s worth taking a deep dive back into creating Ethereum

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

EditPlus Chinese cracked version

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function

VSCode Windows 64-bit Download

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool