My way out.
Firefox margin-top invalid problem we simply join the Display:inline-block, it can be solved,
Some examples are attached below
. Box2 Increase Float Property
Adding a layer of "<div style=" Clear:both between 2.box1 and Box2; ></div> "
(ii) child element setting Margin-top action on parent container
The code is as follows |
Copy Code |
<div class= "box" style= "height:100px;background:red;" > <div class= "Box2" >clear:both; Margin-top:20px;height:50px;width:500px;background: #000;</div> </div> |
When Margin-top is set for Box2, only the parent container is used under FF.
The code is as follows |
Copy Code |
Margin-top problems under <title>firefox </title> <style type= "Text/css" > <!-- * { margin:0; padding:0; } . box2{ margin-top:20px; width:500px; height:50px; Background: #000; Color: #fff; } --> </style> <body> <div class= "box" style= "height:100px;background:red;" > <div class= "Box2" >clear:both; Margin-top:20px;height:50px;width:500px;background: #000;</div> </div>
|
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
Solution:
1. Add Overflow:hidden to the parent container box; property
2. Parent container box plus border properties other than none
3. Replace Margin-top with the padding-top of the parent container box