Something like margin or padding except where background doesn't draw
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: left
ed div
s and right now I can't get any spacing between that and the float
ed divs above it. They just abut directly against each other.
The div
that is going below the float: left
ed div
s has the property clear: both
. If there was something that made that div
have space between it and that float
ed 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
精彩评论