Отрицательная маржа дает прокрутку

Question

Я пытаюсь достичь paddings везде, кроме сторон контента. Вот мой код:

http://jsfiddle.net/3tbovz0f/1/

CSS:

.col1 .fill { 
    background: red; 
} 
.col2 .fill { 
    background: blue; 
} 
.col { 
    width: 50%; 
    float: left; 
} 
.pd { 
    padding: 10px; 
} 
.row { 
    margin: -10px; 
} 
.fill { 
    height: 30px; 
} 

HTML:

<div class="row"> 
    <div class="col col1"> 
     <div class="pd"> 
      <div class="fill"></div> 
     </div> 
    </div> 
    <div class="col col2"> 
     <div class="pd"> 
      <div class="fill"></div> 
     </div> 
    </div> 
</div> 

я скроллбар от этого. Что я делаю неправильно? Почему это появляется?

Answer 1

Вы должны использовать box-sizing:border-box для того, чтобы правильно отображаться.

Вот скрипку его работает должным образом: http://jsfiddle.net/sLxphrke/14/

CSS

body { 
    margin:0; 
    padding:0; 
} 
.col1 .fill { 
    background: red; 
} 
.col2 .fill { 
    background: blue; 
} 
.col { 
    width: 50%; 
    float: left; 
    padding-left:10px; 
    box-sizing:border-box; 
} 
.pd { 
    padding: 10px 0; 
} 
.row { 
    margin: 0 0 0 -10px; 
    overflow: auto; 
    background: pink; 
} 

Я также изменил отступы на PD только влияют на верхнюю и нижнюю, и дал каждый столбец свой собственный 10px отступы. Чтобы создать больше строк, все, что вам нужно сделать, это изменить 50% на 100/NumberOfRows, например 33.3333% на 3 строки. Все остальное останется неизменным.

Answer 2

обновление с этим. проверить эту ссылку: http://jsfiddle.net/realdeepak/sLxphrke/

body { 
    margin: 0; 
    padding: 0; 
} 
.row { 
    margin: 0px; 
} 

Я думаю, что это будет работать. И ваш свиток будет удален.

Answer 3

Проблема в том, что мама .row div не выполняла весь экран (в частности), и у вас было еще 2 дочерних div с 50% каждого. Итак, когда вы суммировали оба, это 100% + поля/поля, что давало вам более 100%. Поэтому вам нужно было указать ширину материнского div, чтобы ребенок делился относительно своей матери. Вы просто должны были добавить к width:100%.row класса .... Я только что создал новую скрипку проверить: http://jsfiddle.net/3tbovz0f/3/

Answer 4

Отрицательные поля будет тянуть DIV от страницы, таким образом, давая вам полосы прокрутки, отрицательные поля не являются хорошей практикой и этого следует избегать. Вы также добавляете дополнение к двум 50% элементам ширины, которые сделают его более 100%. Если вы хотите это сделать, вам придется использовать поле для выбора размера коробки.

Я немного изменил ваш css, и я думаю, что вы просили заполнить все, кроме внешних сторон? Поэтому я структурировал дополнение, чтобы сделать это.

скрипку расслоение плотной - https://jsfiddle.net/3tbovz0f/11/

/*makes it so you don't have to calculate exact percentage*/ 
html{ 
    box-sizing: border-box; 
} 
*, *:before, *:after { 
    box-sizing: inherit; 
} 
body { 
    margin: 0; 
} 
.col1 .fill { 
    background: red; 
} 
.col2 .fill { 
    background: blue; 
} 
.col1 { 
    padding: 10px 10px 10px 0; 
} 

.col2 { 
    padding: 10px 0 10px 10px; 
} 

.col { 
    width: 50%; 
    float: left; 
} 

.row { 
    width:100%; 
} 
.fill { 
    height: 30px; 
}