CSS Text Bottom Margin Ignored
Ok, I hope this isn't a simple oversight but I have been working on this for hours!
I have a fairly complex HTML / CSS structure on a page I'm working with. I have text at the very bottom of the page that is in a div with a bottom margin of 10px;. That div is in another div with a bottom margin of 10px;.That div is in other divs on up the chain until <body>.
For some reason the text butts right up against the bottom of the div it is inside. I have created a minimalist repro for people to look at. It does reproduce the problem, I just hope I haven't removed any other issues that are contributory to the issue.
I did get it working in the latest chrome at one point with a height: 100%; somewhere in there (I don't remember where now) but it didn't fix the problem in firefox and ie. Both of those browsers had bizarre behavior with that css, they initially displayed with the correct bottom margin size but instantly jumped back开发者_运维百科 down so that the text had no bottom margin again. It was like a little blip.
Oh, also in my repro html ie isn't displaying anything centered (at least ie9). I'm hoping that won't be a problem. I can certainly fix that issue easily enough myself.
In chrome, if you inspect element it highlights the text div in blue and the blue bounding box shows that the div extends beyond where it is currently being displayed.
Here is the minimalist example: http://www.del337ed.com/repro.html
I appreciate everyone's input / help.
Add overflow: hidden to #SubmissionDetails to fix the margin problem by preventing the behaviour of collapsing margins on that div.
Add a doctype as the very first line to escape Quirks Mode and fix your page in Internet Explorer:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(You could also use the much shorter <!DOCTYPE html>, I just stuck with what you had)
Making this change will also improve things in other browsers (that is, it will improve the consistency).
In your example, the div which contains the markup for the thoughts - which currently has no class assiciated with it add the following:
height: auto; overflow: hidden;
Use padding instead. The margin is there, it's just that margin does not fill in the background (which is why it looks like there is no separation.) It's there, it's just not visible.
element.style {
padding-bottom: 10px; /* change the margin property to padding */
font-size: .9em;
font-style: italic;
}
加载中,请稍侯......
精彩评论