<!DOCTYPE html>

Андрей7000 · October 1, 2018

При использовании <!DOCTYPE html> получается кака . Если убираю эту строчку из html-файла, то все прекрасно получается, так как и задумывалось. Эффект, которого надо достичь при наведении курсора.

Использую сброс стилей, но с <!DOCTYPE html> есть непонятные отступы (на первой картинке видно после заголовка) и выше описанная ерунда. Перебирал по отдельности каждый стиль, ничего не помогло, кроме удаления <!DOCTYPE html>.

На сколько я понимаю, <!DOCTYPE html> нужен, чтобы небыло неразберихи, а тут именно с ним неразбериха. В чем тут смысл.

Edited October 1, 2018 by Андрей7000

Switch74 · October 3, 2018

display:block; прописан для article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
линия у вас img

Switch74 · October 3, 2018

display:block; для линии вашей поставьте

Vlad_P · October 1, 2018

По скринам вам вряд ли кто подскажет

Switch74 · October 2, 2018

попробуйте img задать vertical-align:top; или display:block;

http://jsfiddle.net/1w5Ldvcz/

Vlad_P · October 2, 2018

C картинкой да, это особенность хтмл5, а у заголовка то у него откуда отступ

Switch74 · October 2, 2018

а это нужно верстку смотреть

Андрей7000 · October 2, 2018

Вот файлы с кодом данного кусочка.

Новая папка.rar

Switch74 · October 2, 2018

не удается открыть данный файл
выкладывайте код на jsfiddle.net

Андрей7000 · October 3, 2018

Картинки надо будет перенести в папку "img".

P.S. Не разобрался, как выкладывать картинки на jsfiddle.net, поэтому выложил сюда. И еще, строка <!DOCTYPE html> на jsfiddle.net подсвечивается серым, то есть, не задействована. Странно как-то. Ах, да, Emmet тоже не набирает эту строку, когда вводишь "DOCTYPE" и нажимаешь табуляцию, первая строка просто <html>, ну а дальше по стандарту.

css_mache_tamplate(flex).css

Mache_Template(без !doctype).html

Mache_Template.html

reset.css

Edited October 3, 2018 by Андрей7000

Андрей7000 · October 3, 2018

В таблице reset.css display: block прописан. Так что не то, или уточните

Андрей7000 · October 3, 2018

А img находиться в section, и, согласно наследованию, img приобретает все стили section, если их не переопределить или отменить

Switch74 · October 3, 2018

с чего вы это взяли, где вы это прочитали?
http://htmlbook.ru/css/display

Андрей7000 · October 3, 2018

Да, вы правы, спасибо большое за помощь. Я только учусь и был большой перерыв, многое призабылось.

Vlad_P · October 3, 2018

Блин не поленился открыть его файлы. все его отступы это от изображений. под заголовком у него тоже изображение. все. Единств. различие нашел в хроме:без доктайпа он высоту изображения приравнял к ширине (она задана) а с доктайпом нет. фф приравнял всезде.

И да. доктайп нужен не для того, чтобы не было неразберихи, а указывает на стандарт документа

Андрей7000 · October 3, 2018

13 минут назад, Vlad_P сказал:

Блин не поленился открыть его файлы. все его отступы это от изображений. под заголовком у него тоже изображение. все. Единств. различие нашел в хроме:без доктайпа он высоту изображения приравнял к ширине (она задана) а с доктайпом нет. фф приравнял всезде.

И да. доктайп нужен не для того, чтобы не было неразберихи, а указывает на стандарт документа

Выше уже сказано, проблема была в отсутствии display: block

Edited October 3, 2018 by Андрей7000

SelenIT · October 3, 2018

2 часа назад, Vlad_P сказал:

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

Так задумывалось исторически, но де-факто последних лет 10 он действительно нужен для включения стандартного режима в браузере, т.е. «чтобы не было неразберихи» ?

Но корень проблемы, да, в том, что элементы с display:inline/inline-что-то всегда резервируют под себя целую строку высотой как минимум с line-height родительского элемента (тут чуть подробнее с примером), а у img по умолчанию display как раз inline.

Vlad_P · October 3, 2018

Вот та строка под картинкой - она появилась именно в хтмл5. и без объявления его доктайпа хтмл5 ее нет. и отступа нет. Так что доктайп все ж необязательно стандартный режим

SelenIT · October 3, 2018

Строка для картинки (вызывающая отступ под ней, а для очень низких картинок — и над ней) появилась в HTML4 (точнее, в CSS эпохи HTML4), Эрик Мейер писал об этом в 2003-м. Стандартный режим (один и тот же) во всех браузерах новее 2000 г. включает любой из доктайпов HTML 4.x Strict, XHTML1.x Strict и HTML5, но HTML5 из них самый короткий (как говорилось в старой рекламе, «если не видно разницы, зачем ~~платить~~ писать больше»:). Поэтому его и сделали стандартом. В самой спецификации написано, что доктайп обязателен лишь «по историческим причинам», т.к. без него в браузерах бывает разброд.

Был еще «почти стандартный» режим, включался при Transitional-доктайпах HTML4 и XHTML1.0 и отличался в основном как раз поведением изолированных картинок, но он был нужен лишь для совместимости с ископаемым контентом и интересен лишь веб-археологам.

Vlad_P · October 3, 2018

Ну с Эриком Мейером я уж точно спорить не буду. Впрочем, мне никогда и не приходило в голову использовать strict

Sign In

<!DOCTYPE html>

Question

Link to comment

Share on other sites

19 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information