css: тайна "маржа" - PullRequest
Новая
       50

css: тайна "маржа"

2 голосов
/ 13 июля 2011

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

Пожалуйста, обратите внимание: я не ищу альтернативные методы многостолбцовой разметки CSS. Я знаю, что их очень много, и эта проблема больше, чем проблема макета столбца.

Ниже приведена разметка и стили для рабочего примера страницы . Вот частичный скриншот этой страницы , который показывает левые элементы, выбранные с помощью Firebug. Загадочное пространство, о котором идет речь, находится справа и помечено красной звездочкой. Стили сброса не включены, но я включил сброс Эрика Мейерса, и это не решило проблему. 

    <div id="side-a"> 
           <p>
        Lorem ipsum ....
        </p> 
    </div> 
    <div id="side-b"> 
           <p>
        Nunc dapibus....
        </p> 
    </div>

    <div id="website-footer"> 
           <ul id="legal-information"> 
                  <li>Copyright 2011</li> 
                  <li><a href="#">Privacy Policy</a></li> 
           </ul> 
    </div>

    div#side-a,
    div#side-b {
        display: inline-block;
        width: 200px;
        padding: 17px 17px 0;
    }

    div#side-a {
           vertical-align: top;
    }

    div#side-b {
           background: #999;
    }

    ul {
           padding-bottom: 17px;
           list-style: none outside none;
    }

    ul li {
           line-height: 17px;
           margin-left: 17px;
    }

    div#website-footer ul#legal-information {
           float: left;
    }

    div#website-footer ul#legal-information li {
           border-left: 1px solid #29443C;
           display: inline;
           margin: 17px 0;
           padding-left: 8px;
    }

    div#website-footer ul#legal-information li:first-child {
           border-left: medium none;
           padding: 0 8px 0 0;
    }

Ответы [ 2 ]

3 голосов
/ 13 июля 2011

Это естественно из-за inline-block. Простое решение - убрать пробел.

http://work.arounds.org/issue/6/unwanted-white-space-between-inline-block-elements/

Существуют и другие обходные пути, основанные на CSS, такие как установка размера шрифта 0 на теле, но AFAIK они не так последовательны / надежны. Хотя я могу ошибаться.

0 голосов
/ 13 июля 2011

Я изменил этот Css: 

div#side-a,
div#side-b {
  float: left
  width: 200px;
  padding: 17px 17px 0;
}

И добавлено в Css для нижнего колонтитула: 

#website-footer {
    clear: both;
}

И это решило проблему.

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

...