Границы, нарушающие col() и span() в Jeet.gs

Добавление границы к элементу, который размещается с помощью span() или col() из jeet.gs, приводит к тому, что каждый элемент становится слишком широким для родительского контейнера.

Есть ли способ это исправить?

некоторые примеры в codepen.

http://codepen.io/aaaaargZombies/pen/yybYMZ

http://codepen.io/aaaaargZombies/pen/WbjQpK


<section>
  <div>block1</div>
  <div>block2</div>
  <div>block3</div>
  <div>block4</div>
  <div>block5</div>
  <div>block6</div>
</section>

edit()

section
  center(800px)
  text-align: center
div
  span(1/3, cycle: 3)
  margin-top: 5px
  margin-bottom: 5px

edit()

section
  center(800px)
  text-align: center
div
  span(1/3, cycle: 3)
  margin-top: 5px
  margin-bottom: 5px
  border 1px dashed red

1 ответ

Решение

Ну, это потому, что у этих элементов есть стандартная блочная модель, а ширина границы не включена в ширину (33.(3)%). Если вы дадите им box-sizing: border-box все будет хорошо.

Другие вопросы по тегам