诸如边距或填充之类的东西,除了不绘制背景的地方

发布于 2024-11-07 20:01:39 字数 483 浏览 2 评论 0原文

有没有什么东西可以实现 margin 的功能,但在该区域没有背景绘制?例如,当您为元素指定 margin: 1em 时,您会在该元素周围得到一个 1em 空白边框,但背景会在该区域绘制。除了不绘制背景之外,还有类似的东西吗?

我的问题是我试图将一些东西放在三个 float: lefted div 以下,但现在我无法在它和 float 之间获得任何间距ed div 位于其上方。他们只是直接紧挨着对方。

float: lefted div 下方的 div 具有属性 clear: Both。如果有什么东西使得 div 和它上面的 floated div 之间有空间,那么这也可以。

Is there something that will do what margin does but without the background drawing in that area? For instance, 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.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

爱已欠费 2024-11-14 20:01:39

也许这个例子将有助于解释(并解决)您的问题?

<!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>

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>
心病无药医 2024-11-14 20:01:39

边距应该是透明的。我认为你在这里看到的是利润率的崩溃。尝试在 div 周围放置 1px 边框,看看会发生什么。

查看 CSS 2.1 规范:

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

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

糖果控 2024-11-14 20:01:39

也许您正在寻找:

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

Perhaps you're looking for:

border: 4px white; /* replace with your color */
赏烟花じ飞满天 2024-11-14 20:01:39

对于浮动元素,它们旁边的元素周围的边距将被忽略。我认为您必须在浮动元素和您想要的项目之间创建一个附加元素。

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.

半仙 2024-11-14 20:01:39

因为元素是浮动的,所以边距空间并不总是得到适当的尊重。使用边距/边框技巧,您只需将元素的颜色设置为与页面背景相同的颜色,并将其厚度设置为您想要的任何值。例如在以下帖子中:

http://socialstreams.co/41/CSS_MarginBorder_Hack

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文