Блог

Главная - Вопросы по программированию - Что-то вроде полей или отступов, за исключением случаев, когда фон не прорисовывается

Что-то вроде полей или отступов, за исключением случаев, когда фон не прорисовывается

#css #background #padding #margin

#css #фон #отступы #поля

Вопрос:

Есть ли что-нибудь, что будет делать то, что margin делает, но без фонового рисунка в этой области? Например, когда вы предоставляете элементу, margin: 1em вы получаете 1em границу из пустого пространства вокруг элемента, но фон прорисовывается в этой области. Есть ли что-то похожее на это, за исключением случаев, когда фон не прорисовывается?

Моя проблема в том, что я пытаюсь поместить что-то ниже трех float: left правок div , и прямо сейчас я не могу получить никакого интервала между этим и float правками ed над ним. Они просто примыкают непосредственно друг к другу.

div То, что находится под float: left редактируемыми div элементами, обладает этим свойством clear: both . Если бы было что-то, из-за чего между этим div было бы пространство, и это float редактировалось div над ним, то это тоже сработало бы.

Ответ №1:

Может быть, этот пример поможет объяснить (и решить) вашу проблему?

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

Ответ №2:

Поля должны быть прозрачными. Я думаю, то, что вы видите здесь, — это сворачивающиеся поля. Попробуйте обвести свои разделы рамкой в 1 пиксель и посмотрите, что получится.

Ознакомьтесь со спецификацией CSS 2.1:

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

Ответ №3:

Возможно, вы ищете:

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

Ответ №4:

При плавающих элементах поля вокруг элементов рядом с ними игнорируются. Я думаю, вам придется создать дополнительный элемент между плавающим элементом и нужным вам элементом.

Ответ №5:

Поскольку элемент перемещается, пространство на полях не всегда будет соблюдаться должным образом. Используйте хак с полями / рамками, где вы просто устанавливаете цвет элемента в тот же цвет, что и фон вашей страницы, и его толщину, какую пожелаете. Например, в следующем сообщении:

http://socialstreams.co/41/CSS_MarginBorder_Hack