Something like margin or padding except where background doesn't draw_问答_开发者

Something like margin or padding except where background doesn't draw

开发者 https://www.devze.com 2023-03-06 21:08 出处：网络

Is there something that will do what margin does but without the background drawing in that area? For ins开发者_开发百科tance, when you give an element margin: 1em you get a 1em border of blank space

Is there something that will do what margin does but without the background drawing in that area? For ins开发者_开发百科tance, when you give an element margin: 1em you get a 1em border of blank space around the element, but the background draws in that area. Is there something similar to that except where the background doesn't draw?

My problem is I'm trying to put something below three float: lefted divs and right now I can't get any spacing between that and the floated divs above it. They just abut directly against each other.

The div that is going below the float: lefted divs has the property clear: both. If there was something that made that div have space between it and that floated div above it then that would work too.

Maybe this example will help explain (and solve) your problem?

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" />

    <style>
        * { margin: 0; padding: 0; }
        h1, p { background-color: #eee; margin: 10px 0; }
        div { background-color: pink; float: left; width: 100px; height: 100px; margin-right: 1px; }
        br { clear: both; display: block; }
    </style>
</head>

<body>

<h1>Hello, World!</h1>

<div></div>
<div></div>
<div></div>

<br />

<p>Lorem ipsum dolor set amit...</p>

</body>
</html>

Margins are supposed to be transparent. I think what you're seeing here is collapsing margins. Try putting a 1px border around your divs and see what happens.

Check out the CSS 2.1 spec:

http://www.w3.org/TR/CSS21/box.html#collapsing-margins

Perhaps you're looking for:

border: 4px white; /* replace with your color */

With floated elements the margin around elements next to them is ignored. I think you will have to create an additional element between the floated element and the item you want.

Because the element is floated margin space won't always be properly respected. Use a margin/border hack where you simply set the element's color to the same color as your page background and its thickness to whatever you desire. Such as in the following post:

http://socialstreams.co/41/CSS_MarginBorder_Hack