Добавить прокладку без изменения общей ширины

Ответ 1

element { 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

Ответ 2

Использовать размер окна, он включает добавление: https://developer.mozilla.org/en-US/docs/CSS/box-sizing

Пример:

div {
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
}

Стоит отметить, что это не будет работать на IE7.

Для IE8 см. верхний ответ на этот вопрос: размер окна: border-box = > для IE8?

Ответ 3

Каждый раз, когда вы добавляете отступ для блокирования элемента, изменяется ширина этого элемента. У этой проблемы много решений. Обычно я устанавливаю margin в первый дочерний элемент и устанавливаю width: 100% для этого элемента.

Например, мы имеем:

<div id="main">
    <div id="child">
        This is content with margin
    </div>
</div>

Стиль CSS для этих элементов:

#main {
    border: solid 1px red;
    float: left;
    width: 5em;
}

#child {
    border: solid 1px blue;
    float: left;
    width: 100%;
    margin: 0.5em;
}

Это решение для любого браузера

Ответ 4

Это старая нить, я знаю. Но в прошлый раз у меня была полная черная дыра о создании DIV с НЕ установленной шириной и с прокладками, поэтому она не взорвет мою 3-колонную строку и CSS2. Поэтому я поместил один DIV с поплавком влево, справа и между ними DIV без поплавка и фиксированной ширины, но я хотел иметь прописку в нем. Как насчет этого...

Я поднялся.: D Но я положил внутренний DIV в центр один и дал ему ширину = 90%. Пока все хорошо, очень простое и не очень хорошее решение, но иногда оно помогает добиться нужного вам внешнего вида.;]

b.r.