создание промежутка между элементом и его границей - PullRequest
Новая
       10

создание промежутка между элементом и его границей

2 голосов
/ 14 апреля 2011

Я пытаюсь создать интервал между элементом и его внешней границей. (РЕДАКТИРОВАТЬ: он хочет сделать две границы между самим элементом и внешней частью рамки блочной модели. Это дает ему пространство для использования полей, заполнения полей и для достижения его цели). Пока что мои поиски в Google и здесь не дали никакого решения.

Я пытаюсь избежать использования изображений для достижения этой цели.

Ответы [ 4 ]

8 голосов
/ 14 апреля 2011

Вы хотите заполнить.

Вот ссылка на сайт, который демонстрирует "margin", "border" и "padding" для элемента. http://css -tricks.com /-CSS-бокс-модель /

Однако раньше была проблема с рендерингом IE блочной модели и «остальным миром» в том смысле, что IE использовал другой механизм для определения «общей ширины». Вы должны понимать, что если вы планируете поддерживать IE7 (два поколения) или старше.

Я полагаю, что использование пути "остальной мир" будет достаточно для ваших нужд.

Для остального мира (и ради того, чтобы эта ссылка больше не работала) вот версия ascii той же диаграммы: 

+----------------------------+
|                            |
|          margin            |
|                            |
|   *******border**********  |
|   *                     *  |
|   *      padding        *  |
|   *                     *  |
|   *   ---------------   *  |
|   *   ---------------   *  |
|   *   ---ELEMENT-----   *  |
|   *   ---------------   *  |
|   *   ---------------   *  |
|   *                     *  |
|   ***********************  |
|                            |
|                            |
+----------------------------+
1 голос
/ 31 октября 2016

Вы можете сделать что-то подобное со вставленной рамкой 

<div class="box"></div>

.box {
background-color: #e1309e;
border: 10px solid #6a51d2;
height: 80px;
width: 80px;
box-shadow: 0 0 0 10px #f3f5f6 inset;
box-sizing: border-box;}

Демо

1 голос
/ 16 апреля 2011

В итоге я использовал технику множественного CSS ( здесь ) и использовал border-color: transparent, чтобы создать прозрачный интервал между элементом и его границей.

1 голос
/ 14 апреля 2011

Вы можете сделать одну из 2 вещей.То, что вы кодируете, определит, что вы используете.

В элемент контейнера (внешний) можно добавить заполнение, чтобы оттолкнуть элемент внутрь от его границы.

Можно использовать поле на внутреннем *Элемент 1008 *, чтобы оттолкнуться от контейнера.

По моему опыту, если вы разрабатываете для Интернета, используйте любой из них, проверяя во всех браузерах, чтобы убедиться, что ваш интервал правильный.

Однако, если вы кодируете электронную почту в формате HTML, вам следует использовать Margin - в некоторых приложениях (Outlook 2007) в некоторых случаях заполнение не работает.

...