Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » Web-программирование » Проблема с div, img и doctype

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки

Открыть новую тему     Написать ответ в эту тему

Aladdinych



Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Сделал html заготовку страницы с резиновой версткой и столкнулся с проблемой.
Вот код:
 
<!DOCTYPE html>
  <html>
  <head>
  <meta charset="utf-8">
  <title>Документ без названия</title>
  <style>
    html, body {
        margin: 0px;
    }
    #cheader {
        margin:0;
        width: 100%;
        background-color: #00ff00;
    }
  header img{
  width: 100%;
  margin:0;
  padding:0;
    }
  </style>
  </head>
  <body>
      <div id="cheader"><img src="images/banner3.jpg" /></div>
  </body>
  </html>
 
 
В результате высота div получается по высоте на 5px больше чем изображение. Несмотря на то, что и в свойствах div и в свойствах img указано margin 0 padding 0 проблему победить не удалось.
Однако если заменить <!DOCTYPE html> на <!DOCTYPE html PUBLIC> проблема чудесным образом излечивается. Но насколько я понимаю такая запись <!DOCTYPE html PUBLIC> не является правильной.
В чем причина появления этих лишних 5px? Можно ли их победить как-то иначе?

Всего записей: 322 | Зарегистр. 18-10-2005 | Отправлено: 10:35 30-10-2014 | Исправлено: Aladdinych, 10:45 30-10-2014
Xrobak

Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Код:
#cheader img {
width: 100%;
margin:0;
padding:0;
display: block;
}

Причина в том, что по умолчанию картинка это инлайн (строчный) элемент и имеет свойство display: inline-block;

Всего записей: 939 | Зарегистр. 16-08-2004 | Отправлено: 12:39 30-10-2014 | Исправлено: Xrobak, 12:42 30-10-2014
Aladdinych



Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Спасибо

Всего записей: 322 | Зарегистр. 18-10-2005 | Отправлено: 12:57 30-10-2014
Открыть новую тему     Написать ответ в эту тему

Компьютерный форум Ru.Board » Интернет » Web-программирование » Проблема с div, img и doctype


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru