Как убрать отступы для изображения помещенного в кнопку панели навигации (bootstrap)?

Question

[Grizmar]

Нужно сделать чтобы в кнопке было изображение занимающее всю высоту этой кнопки, но bootstrap делает отступы для него, как их убрать?



Вот html и css:

<nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
    <section class="container">
        <div class="btn-group navbar-btn">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                <img src="/img/0.jpg" alt="..." class="img-responsive img-logo">
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">Действие</a></li>
                <li><a href="#">Другое действие</a></li>
                <li><a href="#">Что-то иное</a></li>
                <li class="divider"></li>
                <li><a href="#">Отдельная ссылка</a></li>
            </ul>
        </div>                
    </section><!-- /.container -->
</nav>
<!-- /navigation -->

.img-logo {
    border: 2px solid black;
    border-radius: 4px;
    height: 100px;
    padding: 0;
    margin: 0;
}

P.S.
Отступы убираются если в классе img-logo сделать margin отрицательным, но мне кажется так делать неправильно и в таком случае другое содержимое наезжает на изображение.

Answer 1

[Heafy]

попробуйте изменить этот класс следующим образом:
.navbar-btn {
margin-top: 0;
margin-bottom: 0;
}

Comments

[Heafy]

если остаётся рамка (1px снизу), то это в
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
}

[Grizmar]

убрались отступы между между кнопкой и контейнером в котором она лежит, но не у изображения

[Grizmar]

дело не в рамке а в том что изображение отступает от краев кнопки

[Grizmar]

на скриншоте красным помечены отступы с боков, вот их и сверху и снизу надо убрать,

[Heafy]

попробуйте в классе
.btn {
...
padding: 0;
...

[Grizmar]

спасибо, последнее помогло

[Heafy]

В том же классе можно рамку убрать:

...
border: 0px solid transparent;
...

и убрать span class='caret'
тогда вообще картинка заливает кнопку полностью

[Grizmar]

каретка нужна, но нужно ее спарва разместить вместе с дополнительным текстом

[Heafy]

убрать display: block из

.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {

  width: 100% \9;
  max-width: 100%;
  height: auto;
}

и дописать текст после span class='caret'
<span class="caret"></span> Текст кнопки

[Heafy]

[Grizmar]

работает, спасибо)

[Heafy]

спасибо за вопрос, было интересно :)