2013-01-31 1 views
3

Я экспериментировал с CSS3 столбцов, и я заметил, есть верхний и нижний края добавил, несмотря на то что я явно поставил их на 0. Вот скриншот:с использованием колонок CSS3 оставляет нежелательную верхний и нижний край

enter image description here

Я выделил поля в желтом цвете. Красными прямоугольниками являются контуры элементов уровня блока, нарисованные из аддона Firefox Web Developer в Firefox.

Вот мой CSS:

.section .content { 
    -moz-column-count: 2; 
    -moz-column-gap: 26px; 
    margin: 0px; 
    padding: 0px; 
} 

Как я могу избавиться от краев?


редактировать
По просьбе прислал мой код jsbin. Он также показывает несоответствие между вершинами для двух столбцов. Поля не отображаются, когда я не использую столбцы.

+0

Может быть, добавить скрипку? –

+0

@ Майкл - Кажется, что он спустился. Сначала я получил «Внутреннюю ошибку сервера 500», но теперь iidrn.com подтверждает, что она не работает. – stevenvh

+0

jsFiddle не работает, попробуйте этот http://jsbin.com/ ..... вы уверены, что этот запас не является нижним пределом от h1? Что произойдет, если вы удалите столбец css, вы все еще видите эту маржу? –

ответ

4

Ваша проблема очень проста: вы добавляете css в контент, но контент содержит абзац с запасом. Сбросить его до 0.

<div class="section"> 
     <h1>Heading 1</h1> 
     <div class="content"> 
      <p> 
      </p> 
     </div> 
</div> 

.

p{margin:0} 

http://jsbin.com/ufobax/2/edit

+0

+1 Aargh! Это было, наверное, слишком легко, и именно поэтому я его не замечал :-). (Я, вероятно, тоже соглашусь, но я, как правило, жду день, давая другие ответы, которые могут дать дополнительную информацию.) – stevenvh

Смежные вопросы