Разница между пробелами и пробелами CSS

Как получить div, чтобы иметь границу 1 px внизу? Вместо этого толстый серый бар. div, который содержит ul с id="widget-content", имеет белый фон с отступом 1px, чтобы получить изображение границы 1px.Разница между пробелами и пробелами CSS

Независимо от того, что я делаю, если я попытаюсь свернуть виджет-контент div или развернуть li div. В ul может быть больше 3 li.

enter image description here

HTML

<div id="content">

<div id="widget-head"> 
<h3><a href="#" target="_blank">CHANNEL</a></h3> 
     <div id="widget-edit"><img src="images/icons/settings_g.png" width="12" height="12"></div> 
    </div> 
    <div id="widget-content"> 
     <ul id="widget-feeds"> 
     <li> 
      <div> 
      <a href="#" > <img src="images/icons/hidden.gif" name="123311"> </a> <a href="#" target="_blank" title="title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet tortor sit amet nunc interdum</a> 
     </div> 
     <div class="widget-desc"> 
     <p>description text here</p> 
     </div> 
    </li> 

    <li> 
     <div> 
     <a href="#" > <img src="images/icons/hidden.gif" name="123311"> </a> <a href="#" target="_blank" title="title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet tortor sit amet nunc interdum</a> 
     </div> 
     <div class="widget-desc"> 
     <p>description text here</p> 
     </div> 
    </li> 

    <li> 
     <div> 
     <a href="#" > <img src="images/icons/hidden.gif" name="123311"> </a> <a href="#" target="_blank" title="title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet tortor sit amet nunc interdum</a> 
     </div> 
     <div class="widget-desc"> 
     <p>description text here</p> 
     </div> 
    </li> 
    </ul> 
</div>

И мой соответствующие CSS

#content #widget-container { 
    width: 30%; 
    background-color: #ddd; 
    float: left; 
    margin-top: 25px; 
    margin-bottom: 25px; 
    margin-left: 25px; 
    white-space: nowrap; 
    display: block; 
} 
#content #widget-container #widget-head { 
    height: 25px; 
    padding: 5px; 
    overflow: hidden; 
    line-height: 25px; 
} 
#content #widget-container #widget-head h3 { 
    font-size: 14px; 
    width: 90%; 
    float: left; 
} 
#content #widget-container #widget-head #widget-edit { 
    float: right; 
    width: 12px; 
    padding-top: 5px; 
} 
#content #widget-container #widget-content { 
    background-color: #FFF; 
    margin: 1px; 

} 
#content #widget-container #widget-content #widget-feeds ul { 
overflow: auto; 
} 
#content #widget-container #widget-content #widget-feeds li { 
    display: block; 
    white-space: normal; 
    word-wrap: normal; 
    margin-bottom: 5px; 
    padding: 4px; 
} 
#content #widget-container #widget-content #widget-feeds li a { 


} 
#content #widget-container #widget-content #widget-feeds li .widget-desc { 
    white-space: normal; 
    display: none; 
    margin-bottom: 4px; 
    padding-top: 2px; 
    padding-right: 10px; 
    padding-bottom: 5px; 
    padding-left: 15px; 
    overflow: hidden; 
}

источник

2013-10-24 JasonBourne

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

Следующие исключит это пространство:

#widget-feeds { margin-bottom: 0 } 
#widget-feeds li { margin-bottom: 0 !important; padding: 4px 0 9px 0 !important; }

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

источник

2013-10-24 21:24:25

Извините, что это не исправить. – JasonBourne

@JasonBourne Правильно, проблема также связана с нижним полем элемента списка. См. Мой отредактированный ответ –

О, я вижу. Благодаря! Это был промежуток поля. GAAAAH! – JasonBourne

Разница между пробелами и пробелами CSS

ответ

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