CSS: 2-пиксельная линия появляется под элементом изображения (IMG)? - PullRequest
Новая
       0

CSS: 2-пиксельная линия появляется под элементом изображения (IMG)?

4 голосов
/ 12 января 2012

Может ли кто-нибудь указать мне, почему есть линия (цвет фона, в данном случае красный) под изображением и над панелью навигации? Firefox и Chrome отображают красную линию, поэтому я предполагаю, что она отображается так, как задумано. Но я не могу найти проблему с помощью инструментов разработчика. Границы, отступы и поля равны нулю, что вызывает недоумение. Вот урезанная версия кода, или jsfiddle.net / bvss4 / 9 : 

  <body>
    <div id="main-wrapper">
      <header id="main-header">
        <img id="title-image" src="http://i.imgur.com/JaYSY.jpg" />
        <div id="main-navbar">
            STUFF
        </div>
      </header>
    </div>
  </body>

CSS: 

* {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

#main-wrapper {
    width: 90%;
    margin: 0 auto;
    border: 3px solid #888;
    margin-top: 20px;
    background: red;
}

#title-image {
    width: 100%;
}

#main-navbar {
    width: 100%;
    background: #333333;
}

bad red line

Ответы [ 3 ]

12 голосов
/ 12 января 2012

Добавление display:block к вашему #title-image исправит это 

 #title-image {
     width: 100%;
     display:block;
 }

JSFiddle здесь

6 голосов
/ 12 января 2012

Установите vertical-align: bottom в CSS изображения.

Причина, по которой это происходит, заключается в том, что изображения отображаются в виде текста.Это означает, что они должны оставить небольшой пробел под линией в случае букв типа y, g и т. Д., Которые опускаются ниже базовой линии и приводят к пробелу.1009 *, вы перемещаете изображение так, чтобы оно было выровнено по нижней части текста, чтобы избежать этой проблемы.

Существует одно исключение, о котором вам следует знать: если изображение имеет меньшую высоту, чем одна строка текста, он оставит пробел над ним, чтобы освободить место для этого текста, если только вы не установите содержащий элемент на line-height, который работает.

4 голосов
/ 12 января 2012

Я только что попробовал на http://jsfiddle.net/nUacj/ - я установил вертикальное выравнивание: среднее вместо базовой линии, и это решило проблему.Будет ли это жизнеспособным решением для вас или вам нужно, чтобы оно было базовым?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...