css внутренняя граница, разбитый макет

Question

Я разделил экран на множество div, чтобы они приклеивали друг к другу (скажем, что-то вроде шахматной доски, но с полями переменного размера).Я устанавливаю heigth и width, используя проценты (относительно родительского контейнера).

Теперь, когда я добавляю border: 1px к элементам div, все разрывы макета ... Я представляю, что граница добавляет 1pxк каждой стороне, и решение было бы добавить некоторую внутреннюю границу.Можно ли как-то добавить такую ​​внутреннюю границу?

Answer 1

Вы можете использовать box-sizing: border-box, чтобы сделать ширину границы частью width элемента.

.example {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

Поддержка браузера.

Answer 2

Использовать свойство структуры. В отличие от свойства границы, он не «добавляет» к высоте или ширине элементов. Однако, в отличие от свойств границы, вы не можете иметь индивидуальные свойства слева, справа, снизу или слева. Хотя у вас могут быть свойства стиля контура, ширины контура и цвета контура.

Краткое описание

Answer 3

Вы можете уменьшить проценты на 0.5 делая их 49.5% РЕДАКТИРОВАТЬ: Outset не будет работать, спасибо @ тридцать

Answer 4

Допустим, если у вас есть родительский div и много дочерних div. Когда вы установите высоту и ширину в процентах, вы получите их прилипать друг к другу. Тогда при добавлении border:1px их ширина станет больше, чем была раньше. Чтобы решить эту проблему, я бы сказал, что у вас должно быть another div after the parent div для предотвращения изменения ширины.