An Interest In:
Web News this Week
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
- March 26, 2024
Fix Collapsing in CSS3
Hi! Today I will discuss different types of collapsing in CSS, and how to fix them.
What is the definition of collapsing?
Collapsed element is an element with a zero height.
Types of collapses that we will discuss:
1- Floating Elements Collapse.
2- Margin Collapse.
3- Absolute Positioning Collapse.
4- Empty Div Collapse.
Floating Elements Collapse.
This is a common problem with floated elements.
If we have an element, that contains nothing but floated elements, then this parent element will collapse.
Fixing it
We will apply the famous clear-fix to fix this problem.
Its a fix applied to the after pseudo-element of the parent element.
Margin Collapse.
Margin collapse happens when you set margin-top for an element, and margin-bottom for the element above it, then the total margin between the two elements is the max-margin between both of them, not the sum of the two margins.
Fixing it
To eliminate that effect, set one of the two elements' display to be inline-block.
Absolute Positioning Collapse.
This type of collapsing happens if the parent container that holds the absolute elements doesn't have an explicit height or width, it will collapse.
Fixing it
The solution is to give the parent container an explicit height or width.
Note: When you gave it a height, don't use percentages, as the parent of this parent (body) is not specified explicitly.
Empty Div Collapse.
If we have an empty div, with no content, then it will collapse.
Fixing it
We could insert some content in the div, by writing the HTML special entity   that corresponds to space.
Another solution is to set a min-height, or a height (with no percentages) for the div.
That's it for today! I hope you learned from it. Good luck!
Original Link: https://dev.to/abdelrahmandeghedy/fixing-collapsing-in-css-9ic
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To