Vertically folded divs have space between them (firefox)

little css problem that I cannot find on SO - although I assume it was asked before, apologize.

So here is the html:

<html>
    <body style="color:white">
        <div class="a" style="width: 70%; background: blue;"><p>helloes helloes helloes</p></div>
        <div class="b" style="width: 70%; background: pink;"><p>talk talk talk</p></div>
        <div class="a" style="width: 70%; background: blue;"><p>yay! yay! yay!</p></div>
    </body>
</html>

beautiful.

If I open it in ff, I get three vertically laid divs - but with space in between! This is not what I wanted! Drama-Rama!

those. does it the way I expect it to cause some alarms.

those. 9, ff is 11

amuses, Andrew!

UPDATE there is a lot of mention of the p tag - why / how does the p tag affect anything? Isn't that a wrapped div and the div has a background color? Should it not be that the div is just internally larger, but without a space between adjacent divs?

UPDATE:

So, I tried this html:

<html style="margin:0px; padding:0px;">

which did not fix the problem, and also this:

<body style="color: white; margin:0px; padding:0px;">

- css "p" ? , css firebug, p 0...

?

UPDATE: , 0. . , .

: css. css , CSS ?

UPDATE: - -webkit, Google, . - ff css, , - ?

+3
5

Chrome . CSS (F12), Chrome <p> :

-webkit-margin-before: 1em;
-webkit-margin-after: 1em;

css :

-webkit-margin-before: 0px;
-webkit-margin-after: 0px;

, !

+4

P . css

p{margin:0px; padding:0px;}
+3

- <p>.

Firefox ( ) , IE. "reset"
p{margin: 0} css.

( ),
* { margin: 0; padding: 0;} css.

: , , Firebug.

+1

Tags <p>have vertical margins. Vertical fields in CSS crash, so child fields can sometimes be applied to parents. See http://www.w3.org/TR/CSS21/box.html#collapsing-margins

0
source

I decided that this would indicate CSS "line height". I just set it the same as the font size, and then I got a consistent DIV distance in all browsers.

0
source

All Articles