Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 113
На мой взгляд то что вы написал — те же «решения с бубнами» потому что лучше разъяснить как ведет себя картика тем кто этого не понимает, а они уже исходя из этого и ситуации решают как убирать отстут, чем придумывать новый тип элементов — «внутристрочный элемент» (интересно почему он внутристрочный, если написано что картинки размещены в блоке — логично что должно быть «внутриблочный»)
Не согласен с «те же «решения с бубнами»» — этот способ правильно отображается у всех браузерах, другие не всегда (из личного практического опыта). А этой статейкой я хотел просто показать решение проблемы.
да, только суть проблемы не понятна, поскольку нет ни картинок, ни подробного ее описания.
Извините господа, не понял за что данную статью так плюсуют, нет ни исследований поведения в случае многоблочности(если их будет 3 что будет с верхним элементом, а с левым?) ни описания dtd и внешних контейнеров. Да, согласен, интересное решение, но, субьективно, статья недостойная главной/
SOREST к вам пожелание, если уж по долгу службы дошли до этого руки посмотрите и опишите плиз, как себя ведут соседние элементы, а так же решение, где vertical-align нижней = топ. Плюс укажите если не сложно для какого контейнера это все проводится, т.к. все-таки body и div ведут себя по-разному в разных случаях. Плюс конечно с какими DTD пробовали :)
SOREST к вам пожелание, если уж по долгу службы дошли до этого руки посмотрите и опишите плиз, как себя ведут соседние элементы, а так же решение, где vertical-align нижней = топ. Плюс укажите если не сложно для какого контейнера это все проводится, т.к. все-таки body и div ведут себя по-разному в разных случаях. Плюс конечно с какими DTD пробовали :)
судя по всему в вашей проблеме изображения висят друг под другом по вертикали.
если им задать «display: block» то промежутка тоже не будет, например.
но вот вопрос: а есть ли где-то здесь текст? или другие элементы?
если им задать «display: block» то промежутка тоже не будет, например.
но вот вопрос: а есть ли где-то здесь текст? или другие элементы?
смотрите в код — нет
хм… я не вижу ни кода, ни картинок. у меня в вашем посте есть только три абзаца текста
внутриблочный и внутристрочный — разные вещи. В моем примере блоков (div) нет. А внутристрочный — это значит — элемент внутри строки, как текст.
в вашем примере вообще ничего нет, кроме фразы «в блоке подряд два изображения»
а таких элементов как внутриблочный и внутристрочный тоже нет.
есть block, inline, run-in
так вот решение проблемы это понять к какому типу относится элемент, понять как он себя ведет контексте, в котором сейчас находится и исходя из этого внести правки в его отображение — такие как изменение свойства vertical-align или display.
а засорять голову «внутристрочными» элементами тем кто и так не понимает какие типы элементов есть и как они себя ведут — это не правильно.
а таких элементов как внутриблочный и внутристрочный тоже нет.
есть block, inline, run-in
так вот решение проблемы это понять к какому типу относится элемент, понять как он себя ведет контексте, в котором сейчас находится и исходя из этого внести правки в его отображение — такие как изменение свойства vertical-align или display.
а засорять голову «внутристрочными» элементами тем кто и так не понимает какие типы элементов есть и как они себя ведут — это не правильно.
inline = in-line = в-строка = внутри-строки = внутристрочный.
Нет?
Нет?
Т. е. я понимаю, что принято называть «строчный», но, такая интрепретация у человека вполне может быть и почему надо за это гнобить? («чем придумывать новый тип элементов»)
Просто объясните и помогите ему.
Просто объясните и помогите ему.
ну почему гнобить? просто поскольку статься ориентирована на новичков, то нужно не засорять людям голову самолично придуманными терминами, а использовать общепринятые.
вот пришел к вам два верстальщика устраиваться работать. вы их спрашиваете: что это за элемент?
один вам отвечает: внутристрочный, а второй: инлайн.
вы про какого подумаете что он больше разбирается в теме?
вот пришел к вам два верстальщика устраиваться работать. вы их спрашиваете: что это за элемент?
один вам отвечает: внутристрочный, а второй: инлайн.
вы про какого подумаете что он больше разбирается в теме?
Мне кажется, что я пойму, что имеет в виду человек, говоря «внутристрочный» в контексте позиционирования элементов. И я оценю его попытку не засорять язык, которую только подстегну поправкой на корректное слово «строчный».
Однако это не значит, что я буду хуже относиться к человеку, употребляющему слово inline в русском языке, а буду оценивать по другим параметрам.
Однако это не значит, что я буду хуже относиться к человеку, употребляющему слово inline в русском языке, а буду оценивать по другим параметрам.
«Строчный» и «блочный» — общепринятые названия. Добавка «внутри» здесь просто избыточно, т.к. название и так определяет уровень использовани элемента. Инлайн и блок — это да, это жаргонизмы.
И соглашусь с оратором где-то в ветке выше, что надо было объяснить почему так происходит и обосновать решение. Ваше решение — второе верное после использования display:block. Между блочными элементами используются только отступы самих элементов, а вот у строчных добавляется еще междустрочное расстояние.
Вариант же автора топика хорошо использовать, например, при размещении 4 картинок 2х2, т.к. нужны именно строчные элементы. Здесь выравнивание по низу даст правильный результат (в то время как базовая линия в разных браузерах рассчитывается по-разному — это можно увидеть на пример
И соглашусь с оратором где-то в ветке выше, что надо было объяснить почему так происходит и обосновать решение. Ваше решение — второе верное после использования display:block. Между блочными элементами используются только отступы самих элементов, а вот у строчных добавляется еще междустрочное расстояние.
Вариант же автора топика хорошо использовать, например, при размещении 4 картинок 2х2, т.к. нужны именно строчные элементы. Здесь выравнивание по низу даст правильный результат (в то время как базовая линия в разных браузерах рассчитывается по-разному — это можно увидеть на пример
, например)нельзя переводить слова в отрыве от контекста, а тем более разбивая их на части.
добро пожаловать в английский язык, где одно слово имеет очень много значений.
а в случае технических терминов, на мой взгляд, вообще следует по возможности избегать перевода — чтобы избежать недоразумений с различными переводами одно и того же термина.
добро пожаловать в английский язык, где одно слово имеет очень много значений.
а в случае технических терминов, на мой взгляд, вообще следует по возможности избегать перевода — чтобы избежать недоразумений с различными переводами одно и того же термина.
По-моему, проще всего прописать у изображения style=«display: block;»
Это не всегда возможно.
А чем проще?
Меньше букв? :)
Меньше букв? :)
И короче, и семантически правильней )
модное нынче слово «семантика» в контексте верстки по смыслу не очень подходит к css — правилу.
семантика по отношению к верстке — есть использование html тэгов в соотсетствии с их семантическим предназначением.
например в тэг h1 вставлять заголовок.
не надо использовать это слово как дополнительный аргумент по отношению ко всему что связано с версткой. честно говоря, раздражает…
семантика по отношению к верстке — есть использование html тэгов в соотсетствии с их семантическим предназначением.
например в тэг h1 вставлять заголовок.
не надо использовать это слово как дополнительный аргумент по отношению ко всему что связано с версткой. честно говоря, раздражает…
Неверная формулировка вызывает вопросы, как в предыдущих комментариях. Есть блочные элементы, есть строчные/строковые. IMG — строчный элемент, поэтому и ведет себя как текст, и свойства приобретает сходные.
З.Ы. Перенесите в Каскадные Таблицы Стилей
З.Ы. Перенесите в Каскадные Таблицы Стилей
Сначала хотел добавить в тематический блог — разобрался, перенес
img — не инлайн элемент.
img — замещаемый элемент. так же как, например, input
img — замещаемый элемент. так же как, например, input
DTD об этом видимо не знает:
<!--=================== Text Elements ====================================-->
<!ENTITY % special.pre
«br | span | bdo | map»>
<!ENTITY % special
"%special.pre; | object | img ">
<!ENTITY % fontstyle «tt | i | b | big | small „>
<!ENTITY % phrase “em | strong | dfn | code | q |
samp | kbd | var | cite | abbr | acronym | sub | sup „>
<!ENTITY % inline.forms “input | select | textarea | label | button»>
<!-- these can occur at block or inline level -->
<!ENTITY % misc.inline «ins | del | script»>
<!-- these can only occur at block level -->
<!ENTITY % misc «noscript | %misc.inline;»>
<!ENTITY % inline «a | %special; | %fontstyle; | %phrase; | %inline.forms;»>
<!-- %Inline; covers inline or «text-level» elements -->
<!ENTITY % Inline "(#PCDATA | %inline; | %misc.inline;)*">
<!--================== Block level elements ==============================-->
<!ENTITY % heading «h1|h2|h3|h4|h5|h6»>
<!ENTITY % lists «ul | ol | dl»>
<!ENTITY % blocktext «pre | hr | blockquote | address»>
<!ENTITY % block
«p | %heading; | div | %lists; | %blocktext; | fieldset | table»>
<!ENTITY % Block "(%block; | form | %misc;)*">
<!-- %Flow; mixes block and inline and is used for list items etc. -->
<!ENTITY % Flow "(#PCDATA | %block; | form | %inline; | %misc;)*">
а при чем здесь DTD? в DTD описывается синтаксис разметки. ее структуру.
а как это все будет отображаться (визуальное отображение) задает CSS. то есть будет картинка отображаться инлайн или блок или еще как-то DTD не указывает.
а как это все будет отображаться (визуальное отображение) задает CSS. то есть будет картинка отображаться инлайн или блок или еще как-то DTD не указывает.
Ну а теперь представьте что у вас документ без стилей. Вобще. По-вашему получается, он вобще отображаться не будет?
я всегда думал что если стили не указаны, то броузер проставляет их в соотсетствии со своими представлениями о занчениях аттрибутов стилей по умолчанию. для этого, например, некоторый обнуляют отступы и поля.
и DTD на это представление влияет только косвенным образом — например изменением режима рендеринга при определенных условиях наличия или отсутсвия указания DOCTYPE
и DTD на это представление влияет только косвенным образом — например изменением режима рендеринга при определенных условиях наличия или отсутсвия указания DOCTYPE
Ресеты применяются для того чтобы обнулить дефолтные значения HTML-элементов.
dinamyte написал хорошую статью о DTD.
dinamyte написал хорошую статью о DTD.
Хм, очень хорошо, что вы так серьёзно относитесь к языку, что даже прочитали выше лекцию против засорения речи словами вроде «внутристрочный» и «семантический».
Вот только в русской грамматике принято слова с предшествующими им несклоняемыми определениями («inline-элемент»), писать через дефис, если уж невозможно избежать такого словоупотребления. «Внутристрочный» было грамотней.
Вот только в русской грамматике принято слова с предшествующими им несклоняемыми определениями («inline-элемент»), писать через дефис, если уж невозможно избежать такого словоупотребления. «Внутристрочный» было грамотней.
все намного проше!
два изображение подряд ставте, без перевода строки в верстке… не будет пробела ;)))
два изображение подряд ставте, без перевода строки в верстке… не будет пробела ;)))
Указываем font-size:0 и тоже нормально работает, или ели не получаеться, то просто удалаем «ентеры» между img и br
или
<div style="font-size:0">
<img src="1226584229_sweet-42.jpg" width="230" />
<br />
<img src="1226584229_sweet-42.jpg" width="230" />
</div>
или
<img src="1226584229_sweet-42.jpg" width="230" /><br /><img src="1226584229_sweet-42.jpg" width="230" />
А вот любопытная штука, мне кажется, что пора уже привыкать к синтаксису XHTML и тем более в примерах показывать новичкам «валидный» код. А то ведь привыкнут к этой «заразе». Я к тому, что '
' все ж следует юзать как '
' (равно как и остальные тэги). Скорей всего, не за горами времена, когда старый добрый html канет в лету.
' все ж следует юзать как '
' (равно как и остальные тэги). Скорей всего, не за горами времена, когда старый добрый html канет в лету.
Пардон. Я про <br/>, <img/>
Не будем устраивать холивар на тему «HTML v XHTML», давайте условимся просто уважать оппонента и не навязывать новичкам своё мнение в таких формулировках. ^_~
Нуу, если никогда и ничего не навязывать новичкам, глядишь, прогресс пойдет в обратную сторону… а там уже и до каменного века недалеко. Вот тогда действительно ни html, ни xhtml никому не будут нужны :-D.
Html, так уж получилось, в силу исторических объективных причин был писан мягко говоря «нестандартно». Спустя много лет это уже аксиома. И никаким холиваром тут не пахнет. Если новичок хочет стать грамотным, будет просто вынужден изучать «правила» xhtml (по крайней мере). А то ведь дальше пойдут всякие xml/xsl и прочие ужасы. И тогда амба :-)
Html, так уж получилось, в силу исторических объективных причин был писан мягко говоря «нестандартно». Спустя много лет это уже аксиома. И никаким холиваром тут не пахнет. Если новичок хочет стать грамотным, будет просто вынужден изучать «правила» xhtml (по крайней мере). А то ведь дальше пойдут всякие xml/xsl и прочие ужасы. И тогда амба :-)
С такимже успехом можно сказать что «баг» это растояние 3-5 пикселей между строками.
Картинки лучше поместить в таблицу.
Картинки лучше поместить в таблицу.
Высоту строки лучше задавать однозначно свойством line-height. Потому что в разных браузерах она бывает разной по умолчанию. И будете всегда знать откуда берутся «лишние» растояния между строками.
В таблицу — это по воробьям з чего то такого большого )
Картинки лучше поместить в таблицу
Жители Хабра приветствуют тебя, гость из прошлого века!
Задавался вопросом в начале своей карьеры верстальщика, почему-то сразу нашел ответ vertcal-align, кто предпочитает bottom, кто top, зависит от конкретного проекта еще. Мне чаще приходится использовать top.
За статью спасибо, новичкам пригодится.
За статью спасибо, новичкам пригодится.
На самом деле решений действительно два (о которых мне известно):
1) изменяем свойство vertical-align;
2) изменяем свойство display.
и мне кажется было бы правильно указать их оба и сообщить, что их применение зависит от задач, так как не всегда можно воспользоваться одним или другим.
1) изменяем свойство vertical-align;
2) изменяем свойство display.
и мне кажется было бы правильно указать их оба и сообщить, что их применение зависит от задач, так как не всегда можно воспользоваться одним или другим.
не люблю лишние br'ки :)
как правило использую display: block, если надо одну картинку под другой сделать, хотя бывают разные случаи.
как правило использую display: block, если надо одну картинку под другой сделать, хотя бывают разные случаи.
да, серьезная тема!
Хотелось бы ещё почитать, что нибудь, вроде «Выравниваем текст по центру» или «Задаём шрифт Вердана» — проблемы по сути не менее актуальные )
Хотелось бы ещё почитать, что нибудь, вроде «Выравниваем текст по центру» или «Задаём шрифт Вердана» — проблемы по сути не менее актуальные )
У вас очень красивые картинки к посту.
На картинках у тега
<img/> не указан обязательный атрибут.если это xhtml то да, если html — нет
А Хабр у нас на чём написан? Ага.
Если html — то тоже пропущен. Я об
alt, если вдруг кто-то не догадался.
<br />нужен, если вдруг CSS не загрузится. А если в вертикальную линеечку 30 штук рисунков будет? Тогда они же без
<br />горизонтально выстроятся, а это ужас будет, уж поверьте.
Вообще, в идеале, XHTML может использоваться и как ресурс с данными. Тогда он очень важен и без CSS. Ведь так много сейчас внимания уделяется «семантической» верстке. В первую очереь, в документе должна быть логика, а уже потом — оформление. Если по логике важны отступы между элементами, они должны быть и без CSS.
<BR/> в форматировании нетекстовых блоков вообще — зло!
Специально для тех, кто не понимает магии. Картиники, как указано выше inline-элемент, и во многом отображаются (и ведут себя) как и текст, то есть на них влияют vertical-align, line-height и прочее. По умолчанию как я понимаю картинка выравнивается по baseline (а это значит не по нижней границе абзаца, а по базвовй линии шрифта — чуть выше), и поэтому уезжает вверх. Сделайте например border-bottom: 1px dashed green; (или outline на норм. браузерах) и подсветите фон блока, в котором они содержатся — и все будет наглядно видно.
«Большинство решали это с бубнами» — вы исследование проводили?
img {margin:0; padding:0; border-width:0;}
и не надо никаких бубнов
P.S. Соблюдайте стандарты, они для того и созданы.
img {margin:0; padding:0; border-width:0;}
и не надо никаких бубнов
P.S. Соблюдайте стандарты, они для того и созданы.
Возможно повторюсь.
Image-элемент согласно всем писаным стандартам является инлайновым (или, как его назвал автор, «внутристрочным»). Поэтому одна картинка внутри блока расценивается как строка. А внизу строки браузер резервирует дополнительное мест для таких букв как «у», «р» и др. (как этот «выступ» называется в типографике?). Отсюда и отступ.
Исключения: в Quirks mode картинка — блочный элемент, в Almost Strict mode тоже.
Информацию взял с сайта quirksmode.org
Image-элемент согласно всем писаным стандартам является инлайновым (или, как его назвал автор, «внутристрочным»). Поэтому одна картинка внутри блока расценивается как строка. А внизу строки браузер резервирует дополнительное мест для таких букв как «у», «р» и др. (как этот «выступ» называется в типографике?). Отсюда и отступ.
Исключения: в Quirks mode картинка — блочный элемент, в Almost Strict mode тоже.
Информацию взял с сайта quirksmode.org
Нашли проблему, решили ее, а ПОЧЕМУ так отображается — НИКТО (насколько я просмотрел комментарии) так и не сказал.
Ну и что что img инлайн елемент? У всех инлайн елементов отступ снизу?
Ведь ответ таится в том что у img vertical-align по умолчанию baseline, то есть низ картинки будет находиться там, где находиться нижний край всех нормальных букв :) кроме «р», «д», «у», «ф» и так далее, которые имеют закарлючки снизу, потому и появляется отступ.
А вот из ЭТОГО уже следуют теперь уже ОЧЕВИДНЫЕ вещи, что vertical-align:bottom и line-height: 0 спасут ситуацию.
УЧИТЕСЬ ИСКАТЬ КОРЕНЬ ПРОБЛЕМЫ, А НЕ СРАЗУ ЕЕ РЕШЕНИЕ, тогда все станет намного проще.
Ну и что что img инлайн елемент? У всех инлайн елементов отступ снизу?
Ведь ответ таится в том что у img vertical-align по умолчанию baseline, то есть низ картинки будет находиться там, где находиться нижний край всех нормальных букв :) кроме «р», «д», «у», «ф» и так далее, которые имеют закарлючки снизу, потому и появляется отступ.
А вот из ЭТОГО уже следуют теперь уже ОЧЕВИДНЫЕ вещи, что vertical-align:bottom и line-height: 0 спасут ситуацию.
УЧИТЕСЬ ИСКАТЬ КОРЕНЬ ПРОБЛЕМЫ, А НЕ СРАЗУ ЕЕ РЕШЕНИЕ, тогда все станет намного проще.
Я имел ввиду, что автор не объяснил почему строчный елемент с таким то бейзлайном, отображается с отступом, то есть природу этого явления.
Потому что из того что елемент строчный и если ему присвоить line-height: 0 среднестатистический хабровчанин навряд ли поймет почему пропадает отступ.
А вообще, эту проблему должен знать с самого начала каждый верстальщик, а то опускаемся до песочницы…
Потому что из того что елемент строчный и если ему присвоить line-height: 0 среднестатистический хабровчанин навряд ли поймет почему пропадает отступ.
А вообще, эту проблему должен знать с самого начала каждый верстальщик, а то опускаемся до песочницы…
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Убираем лишний отступ внизу изображения