За последние 24 часа нас посетили 43049 программистов и 1764 робота. Сейчас ищут 857 программистов ...

Лишние отступы от блока

Тема в разделе "HTML и CSS", создана пользователем realasd, 5 июл 2011.

  1. realasd

    realasd Активный пользователь

    С нами с:
    14 окт 2010
    Сообщения:
    51
    Симпатии:
    0
    Адрес:
    Челябинск
    Не могу понять откуда появляются лишние отступы
    Код (Text):
    1.  
    2. <div class="block">бла бла бла</div>
    3. <div class="block">бла бла бла</div>
    4. <div class="block">бла бла бла</div>
    5. <div class="clear"></div>
    6. <div class="block">бла бла бла</div>
    7. <div class="block">бла бла бла</div>
    8. <div class="block">бла бла бла</div>
    [css]
    .block{
    float: left;
    width: 100px;
    }
    .clear{
    clear: both;
    }
    [/css]

    XHTML strict
    Отступы появляются между первым и вторым рядом. Firebag и Dragonfly показывают высоту блока clear 0 отступы 0.
    Бред какой-то.
     
  2. MiksIr

    MiksIr Активный пользователь

    С нами с:
    29 ноя 2006
    Сообщения:
    2.339
    Симпатии:
    44
    line-height?
     
  3. realasd

    realasd Активный пользователь

    С нами с:
    14 окт 2010
    Сообщения:
    51
    Симпатии:
    0
    Адрес:
    Челябинск
    line-height: 18px а у меня отступ на пол страницы
     
  4. Gromo

    Gromo Активный пользователь

    С нами с:
    24 май 2010
    Сообщения:
    2.786
    Симпатии:
    2
    Адрес:
    Ташкент
    HTML:
    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    2.   <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    3.   <style type="text/css">
    4.     .block{
    5.       float: left;
    6.       width: 100px;
    7.     }
    8.     .clear{
    9.       clear: both;
    10.     }
    11.   </style>
    12. </head>
    13.  
    14.   <div class="block">бла бла бла</div>
    15.   <div class="block">бла бла бла</div>
    16.   <div class="block">бла бла бла</div>
    17.   <div class="clear"></div>
    18.   <div class="block">бла бла бла</div>
    19.   <div class="block">бла бла бла</div>
    20.   <div class="block">бла бла бла</div>
    21.  
    22. </body>
    23. </html>
    отступов обнаружено не было.
    скорее всего слева/справа есть блок с float-ом по высоте в пол страницы, после которого вступает в действие
    который будет расположен ниже данного блока в любом случае
     
  5. realasd

    realasd Активный пользователь

    С нами с:
    14 окт 2010
    Сообщения:
    51
    Симпатии:
    0
    Адрес:
    Челябинск
    Gromo так и есть. На странице есть два сайдбара(один слева второй справа) и блок с контентом.
    Порядок такой: правый сайдбар(float: right), левый(float: left), контент в котором располагаются блоки block. После <div class="clear"></div> из-за правого сайдбара(видимо, потому что он по высоте больше чем левый) получается отступ ровно до его нижней границы.

    Для проверки ставил рамку каждому блоку, чтобы увидеть что там мешает.
    Почему из-за правого сайдбара получается отступ понять не могу! Как решить данную проблему?
     
  6. Gromo

    Gromo Активный пользователь

    С нами с:
    24 май 2010
    Сообщения:
    2.786
    Симпатии:
    2
    Адрес:
    Ташкент
    realasd
    свойство clear:both обнуляет все флоаты всех предыдущих элементов. т.е. элемент со свойством clear:both будет идти ниже любого другого элемента с float-ом.

    можно попробовать сделать только clear:left - т.е. идти ниже любого другого элемента с float:left, но тогда будет мешать левая панель - зависит от того каким образом сделана вёрстка.
     
  7. realasd

    realasd Активный пользователь

    С нами с:
    14 окт 2010
    Сообщения:
    51
    Симпатии:
    0
    Адрес:
    Челябинск
    решил проблему: поместил все блоки "block" в div со стилем float: left.( хотя есть подозрение, что если левый сайдбар будет длиннее правого отступ снова появится)
    Но всёравно не понимаю: как может sidebar мешать контенту в центральном блоке. Насколько я понимаю если разметсить блок со свойством clear:both в центральном блоке, то размещённый блок должен идти ниже всех элементов именно в центральном блоке и не учитывать другие элементы которые находятся вне центрального блока даже с обтеканием.