Комментарии 113
На мой взгляд то что вы написал — те же «решения с бубнами» потому что лучше разъяснить как ведет себя картика тем кто этого не понимает, а они уже исходя из этого и ситуации решают как убирать отстут, чем придумывать новый тип элементов — «внутристрочный элемент» (интересно почему он внутристрочный, если написано что картинки размещены в блоке — логично что должно быть «внутриблочный»)
+9
Не согласен с «те же «решения с бубнами»» — этот способ правильно отображается у всех браузерах, другие не всегда (из личного практического опыта). А этой статейкой я хотел просто показать решение проблемы.
-2
да, только суть проблемы не понятна, поскольку нет ни картинок, ни подробного ее описания.
+2
Извините господа, не понял за что данную статью так плюсуют, нет ни исследований поведения в случае многоблочности(если их будет 3 что будет с верхним элементом, а с левым?) ни описания dtd и внешних контейнеров. Да, согласен, интересное решение, но, субьективно, статья недостойная главной/
SOREST к вам пожелание, если уж по долгу службы дошли до этого руки посмотрите и опишите плиз, как себя ведут соседние элементы, а так же решение, где vertical-align нижней = топ. Плюс укажите если не сложно для какого контейнера это все проводится, т.к. все-таки body и div ведут себя по-разному в разных случаях. Плюс конечно с какими DTD пробовали :)
SOREST к вам пожелание, если уж по долгу службы дошли до этого руки посмотрите и опишите плиз, как себя ведут соседние элементы, а так же решение, где vertical-align нижней = топ. Плюс укажите если не сложно для какого контейнера это все проводится, т.к. все-таки body и div ведут себя по-разному в разных случаях. Плюс конечно с какими DTD пробовали :)
+7
судя по всему в вашей проблеме изображения висят друг под другом по вертикали.
если им задать «display: block» то промежутка тоже не будет, например.
но вот вопрос: а есть ли где-то здесь текст? или другие элементы?
если им задать «display: block» то промежутка тоже не будет, например.
но вот вопрос: а есть ли где-то здесь текст? или другие элементы?
+9
смотрите в код — нет
0
хм… я не вижу ни кода, ни картинок. у меня в вашем посте есть только три абзаца текста
+2
внутриблочный и внутристрочный — разные вещи. В моем примере блоков (div) нет. А внутристрочный — это значит — элемент внутри строки, как текст.
0
в вашем примере вообще ничего нет, кроме фразы «в блоке подряд два изображения»
а таких элементов как внутриблочный и внутристрочный тоже нет.
есть block, inline, run-in
так вот решение проблемы это понять к какому типу относится элемент, понять как он себя ведет контексте, в котором сейчас находится и исходя из этого внести правки в его отображение — такие как изменение свойства vertical-align или display.
а засорять голову «внутристрочными» элементами тем кто и так не понимает какие типы элементов есть и как они себя ведут — это не правильно.
а таких элементов как внутриблочный и внутристрочный тоже нет.
есть block, inline, run-in
так вот решение проблемы это понять к какому типу относится элемент, понять как он себя ведет контексте, в котором сейчас находится и исходя из этого внести правки в его отображение — такие как изменение свойства vertical-align или display.
а засорять голову «внутристрочными» элементами тем кто и так не понимает какие типы элементов есть и как они себя ведут — это не правильно.
+3
inline = in-line = в-строка = внутри-строки = внутристрочный.
Нет?
Нет?
0
Т. е. я понимаю, что принято называть «строчный», но, такая интрепретация у человека вполне может быть и почему надо за это гнобить? («чем придумывать новый тип элементов»)
Просто объясните и помогите ему.
Просто объясните и помогите ему.
+1
ну почему гнобить? просто поскольку статься ориентирована на новичков, то нужно не засорять людям голову самолично придуманными терминами, а использовать общепринятые.
вот пришел к вам два верстальщика устраиваться работать. вы их спрашиваете: что это за элемент?
один вам отвечает: внутристрочный, а второй: инлайн.
вы про какого подумаете что он больше разбирается в теме?
вот пришел к вам два верстальщика устраиваться работать. вы их спрашиваете: что это за элемент?
один вам отвечает: внутристрочный, а второй: инлайн.
вы про какого подумаете что он больше разбирается в теме?
-3
Мне кажется, что я пойму, что имеет в виду человек, говоря «внутристрочный» в контексте позиционирования элементов. И я оценю его попытку не засорять язык, которую только подстегну поправкой на корректное слово «строчный».
Однако это не значит, что я буду хуже относиться к человеку, употребляющему слово inline в русском языке, а буду оценивать по другим параметрам.
Однако это не значит, что я буду хуже относиться к человеку, употребляющему слово inline в русском языке, а буду оценивать по другим параметрам.
+2
«Строчный» и «блочный» — общепринятые названия. Добавка «внутри» здесь просто избыточно, т.к. название и так определяет уровень использовани элемента. Инлайн и блок — это да, это жаргонизмы.
И соглашусь с оратором где-то в ветке выше, что надо было объяснить почему так происходит и обосновать решение. Ваше решение — второе верное после использования display:block. Между блочными элементами используются только отступы самих элементов, а вот у строчных добавляется еще междустрочное расстояние.
Вариант же автора топика хорошо использовать, например, при размещении 4 картинок 2х2, т.к. нужны именно строчные элементы. Здесь выравнивание по низу даст правильный результат (в то время как базовая линия в разных браузерах рассчитывается по-разному — это можно увидеть на пример
И соглашусь с оратором где-то в ветке выше, что надо было объяснить почему так происходит и обосновать решение. Ваше решение — второе верное после использования display:block. Между блочными элементами используются только отступы самих элементов, а вот у строчных добавляется еще междустрочное расстояние.
Вариант же автора топика хорошо использовать, например, при размещении 4 картинок 2х2, т.к. нужны именно строчные элементы. Здесь выравнивание по низу даст правильный результат (в то время как базовая линия в разных браузерах рассчитывается по-разному — это можно увидеть на пример
, например)
+1
нельзя переводить слова в отрыве от контекста, а тем более разбивая их на части.
добро пожаловать в английский язык, где одно слово имеет очень много значений.
а в случае технических терминов, на мой взгляд, вообще следует по возможности избегать перевода — чтобы избежать недоразумений с различными переводами одно и того же термина.
добро пожаловать в английский язык, где одно слово имеет очень много значений.
а в случае технических терминов, на мой взгляд, вообще следует по возможности избегать перевода — чтобы избежать недоразумений с различными переводами одно и того же термина.
-2
НЛО прилетело и опубликовало эту надпись здесь
По-моему, проще всего прописать у изображения style=«display: block;»
+7
Это не всегда возможно.
0
А чем проще?
Меньше букв? :)
Меньше букв? :)
0
И короче, и семантически правильней )
-2
модное нынче слово «семантика» в контексте верстки по смыслу не очень подходит к css — правилу.
семантика по отношению к верстке — есть использование html тэгов в соотсетствии с их семантическим предназначением.
например в тэг h1 вставлять заголовок.
не надо использовать это слово как дополнительный аргумент по отношению ко всему что связано с версткой. честно говоря, раздражает…
семантика по отношению к верстке — есть использование html тэгов в соотсетствии с их семантическим предназначением.
например в тэг h1 вставлять заголовок.
не надо использовать это слово как дополнительный аргумент по отношению ко всему что связано с версткой. честно говоря, раздражает…
+2
Неверная формулировка вызывает вопросы, как в предыдущих комментариях. Есть блочные элементы, есть строчные/строковые. IMG — строчный элемент, поэтому и ведет себя как текст, и свойства приобретает сходные.
З.Ы. Перенесите в Каскадные Таблицы Стилей
З.Ы. Перенесите в Каскадные Таблицы Стилей
+2
Сначала хотел добавить в тематический блог — разобрался, перенес
0
img — не инлайн элемент.
img — замещаемый элемент. так же как, например, input
img — замещаемый элемент. так же как, например, input
0
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;)*">
+5
а при чем здесь DTD? в DTD описывается синтаксис разметки. ее структуру.
а как это все будет отображаться (визуальное отображение) задает CSS. то есть будет картинка отображаться инлайн или блок или еще как-то DTD не указывает.
а как это все будет отображаться (визуальное отображение) задает CSS. то есть будет картинка отображаться инлайн или блок или еще как-то DTD не указывает.
-9
НЛО прилетело и опубликовало эту надпись здесь
очень содержательно.
раз маразм, то значит я не понимаю что такое DTD, значит имеет смысл написать мне что это такое и какие функции выполняет.
чтобы я понял что не прав и больше так не думал, а соответственно и не писал.
так что же такое DTD и какие функции он выполняет?
раз маразм, то значит я не понимаю что такое DTD, значит имеет смысл написать мне что это такое и какие функции выполняет.
чтобы я понял что не прав и больше так не думал, а соответственно и не писал.
так что же такое DTD и какие функции он выполняет?
-5
Ну а теперь представьте что у вас документ без стилей. Вобще. По-вашему получается, он вобще отображаться не будет?
+1
я всегда думал что если стили не указаны, то броузер проставляет их в соотсетствии со своими представлениями о занчениях аттрибутов стилей по умолчанию. для этого, например, некоторый обнуляют отступы и поля.
и DTD на это представление влияет только косвенным образом — например изменением режима рендеринга при определенных условиях наличия или отсутсвия указания DOCTYPE
и DTD на это представление влияет только косвенным образом — например изменением режима рендеринга при определенных условиях наличия или отсутсвия указания DOCTYPE
+1
Ресеты применяются для того чтобы обнулить дефолтные значения HTML-элементов.
dinamyte написал хорошую статью о DTD.
dinamyte написал хорошую статью о DTD.
+1
спасибо.
на мой взгляд, наиболее правильная форма диалога — написал свое мнение получил ответ о том что не прав с информацией почему именно ты не прав, а не комментарий типа: «маразм» и минус в карму =)
на мой взгляд, наиболее правильная форма диалога — написал свое мнение получил ответ о том что не прав с информацией почему именно ты не прав, а не комментарий типа: «маразм» и минус в карму =)
+1
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
Хм, очень хорошо, что вы так серьёзно относитесь к языку, что даже прочитали выше лекцию против засорения речи словами вроде «внутристрочный» и «семантический».
Вот только в русской грамматике принято слова с предшествующими им несклоняемыми определениями («inline-элемент»), писать через дефис, если уж невозможно избежать такого словоупотребления. «Внутристрочный» было грамотней.
Вот только в русской грамматике принято слова с предшествующими им несклоняемыми определениями («inline-элемент»), писать через дефис, если уж невозможно избежать такого словоупотребления. «Внутристрочный» было грамотней.
0
НЛО прилетело и опубликовало эту надпись здесь
все намного проше!
два изображение подряд ставте, без перевода строки в верстке… не будет пробела ;)))
два изображение подряд ставте, без перевода строки в верстке… не будет пробела ;)))
-2
НЛО прилетело и опубликовало эту надпись здесь
какой не стандартный рейндеринг? вы о чем?
это теги HTML, броузеры их кушают… кто кого рендерит?
это теги HTML, броузеры их кушают… кто кого рендерит?
-7
Если уже два изображения стоят по вертикали, и мы знаем что они будут друг под другом, то почему бы просто их не сделать одним изображением. Проблема не просто решена — ее не будет :)
0
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
Указываем 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" />
+4
А вот любопытная штука, мне кажется, что пора уже привыкать к синтаксису XHTML и тем более в примерах показывать новичкам «валидный» код. А то ведь привыкнут к этой «заразе». Я к тому, что '
' все ж следует юзать как '
' (равно как и остальные тэги). Скорей всего, не за горами времена, когда старый добрый html канет в лету.
' все ж следует юзать как '
' (равно как и остальные тэги). Скорей всего, не за горами времена, когда старый добрый html канет в лету.
0
Пардон. Я про <br/>, <img/>
0
Не будем устраивать холивар на тему «HTML v XHTML», давайте условимся просто уважать оппонента и не навязывать новичкам своё мнение в таких формулировках. ^_~
-1
Нуу, если никогда и ничего не навязывать новичкам, глядишь, прогресс пойдет в обратную сторону… а там уже и до каменного века недалеко. Вот тогда действительно ни html, ни xhtml никому не будут нужны :-D.
Html, так уж получилось, в силу исторических объективных причин был писан мягко говоря «нестандартно». Спустя много лет это уже аксиома. И никаким холиваром тут не пахнет. Если новичок хочет стать грамотным, будет просто вынужден изучать «правила» xhtml (по крайней мере). А то ведь дальше пойдут всякие xml/xsl и прочие ужасы. И тогда амба :-)
Html, так уж получилось, в силу исторических объективных причин был писан мягко говоря «нестандартно». Спустя много лет это уже аксиома. И никаким холиваром тут не пахнет. Если новичок хочет стать грамотным, будет просто вынужден изучать «правила» xhtml (по крайней мере). А то ведь дальше пойдут всякие xml/xsl и прочие ужасы. И тогда амба :-)
0
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
С такимже успехом можно сказать что «баг» это растояние 3-5 пикселей между строками.
Картинки лучше поместить в таблицу.
Картинки лучше поместить в таблицу.
-2
Высоту строки лучше задавать однозначно свойством line-height. Потому что в разных браузерах она бывает разной по умолчанию. И будете всегда знать откуда берутся «лишние» растояния между строками.
+2
В таблицу — это по воробьям з чего то такого большого )
+1
Картинки лучше поместить в таблицу
Жители Хабра приветствуют тебя, гость из прошлого века!
+8
Задавался вопросом в начале своей карьеры верстальщика, почему-то сразу нашел ответ vertcal-align, кто предпочитает bottom, кто top, зависит от конкретного проекта еще. Мне чаще приходится использовать top.
За статью спасибо, новичкам пригодится.
За статью спасибо, новичкам пригодится.
0
На самом деле решений действительно два (о которых мне известно):
1) изменяем свойство vertical-align;
2) изменяем свойство display.
и мне кажется было бы правильно указать их оба и сообщить, что их применение зависит от задач, так как не всегда можно воспользоваться одним или другим.
1) изменяем свойство vertical-align;
2) изменяем свойство display.
и мне кажется было бы правильно указать их оба и сообщить, что их применение зависит от задач, так как не всегда можно воспользоваться одним или другим.
+1
не люблю лишние br'ки :)
как правило использую display: block, если надо одну картинку под другой сделать, хотя бывают разные случаи.
как правило использую display: block, если надо одну картинку под другой сделать, хотя бывают разные случаи.
0
да, серьезная тема!
Хотелось бы ещё почитать, что нибудь, вроде «Выравниваем текст по центру» или «Задаём шрифт Вердана» — проблемы по сути не менее актуальные )
Хотелось бы ещё почитать, что нибудь, вроде «Выравниваем текст по центру» или «Задаём шрифт Вердана» — проблемы по сути не менее актуальные )
+12
У вас очень красивые картинки к посту.
-1
На картинках у тега
<img/>
не указан обязательный атрибут.+1
<br />нужен, если вдруг CSS не загрузится. А если в вертикальную линеечку 30 штук рисунков будет? Тогда они же без
<br />горизонтально выстроятся, а это ужас будет, уж поверьте.
0
НЛО прилетело и опубликовало эту надпись здесь
Вообще, в идеале, XHTML может использоваться и как ресурс с данными. Тогда он очень важен и без CSS. Ведь так много сейчас внимания уделяется «семантической» верстке. В первую очереь, в документе должна быть логика, а уже потом — оформление. Если по логике важны отступы между элементами, они должны быть и без CSS.
0
<BR/> в форматировании нетекстовых блоков вообще — зло!
+2
Специально для тех, кто не понимает магии. Картиники, как указано выше inline-элемент, и во многом отображаются (и ведут себя) как и текст, то есть на них влияют vertical-align, line-height и прочее. По умолчанию как я понимаю картинка выравнивается по baseline (а это значит не по нижней границе абзаца, а по базвовй линии шрифта — чуть выше), и поэтому уезжает вверх. Сделайте например border-bottom: 1px dashed green; (или outline на норм. браузерах) и подсветите фон блока, в котором они содержатся — и все будет наглядно видно.
+2
«Большинство решали это с бубнами» — вы исследование проводили?
img {margin:0; padding:0; border-width:0;}
и не надо никаких бубнов
P.S. Соблюдайте стандарты, они для того и созданы.
img {margin:0; padding:0; border-width:0;}
и не надо никаких бубнов
P.S. Соблюдайте стандарты, они для того и созданы.
-2
Возможно повторюсь.
Image-элемент согласно всем писаным стандартам является инлайновым (или, как его назвал автор, «внутристрочным»). Поэтому одна картинка внутри блока расценивается как строка. А внизу строки браузер резервирует дополнительное мест для таких букв как «у», «р» и др. (как этот «выступ» называется в типографике?). Отсюда и отступ.
Исключения: в Quirks mode картинка — блочный элемент, в Almost Strict mode тоже.
Информацию взял с сайта quirksmode.org
Image-элемент согласно всем писаным стандартам является инлайновым (или, как его назвал автор, «внутристрочным»). Поэтому одна картинка внутри блока расценивается как строка. А внизу строки браузер резервирует дополнительное мест для таких букв как «у», «р» и др. (как этот «выступ» называется в типографике?). Отсюда и отступ.
Исключения: в Quirks mode картинка — блочный элемент, в Almost Strict mode тоже.
Информацию взял с сайта quirksmode.org
+1
Нашли проблему, решили ее, а ПОЧЕМУ так отображается — НИКТО (насколько я просмотрел комментарии) так и не сказал.
Ну и что что img инлайн елемент? У всех инлайн елементов отступ снизу?
Ведь ответ таится в том что у img vertical-align по умолчанию baseline, то есть низ картинки будет находиться там, где находиться нижний край всех нормальных букв :) кроме «р», «д», «у», «ф» и так далее, которые имеют закарлючки снизу, потому и появляется отступ.
А вот из ЭТОГО уже следуют теперь уже ОЧЕВИДНЫЕ вещи, что vertical-align:bottom и line-height: 0 спасут ситуацию.
УЧИТЕСЬ ИСКАТЬ КОРЕНЬ ПРОБЛЕМЫ, А НЕ СРАЗУ ЕЕ РЕШЕНИЕ, тогда все станет намного проще.
Ну и что что img инлайн елемент? У всех инлайн елементов отступ снизу?
Ведь ответ таится в том что у img vertical-align по умолчанию baseline, то есть низ картинки будет находиться там, где находиться нижний край всех нормальных букв :) кроме «р», «д», «у», «ф» и так далее, которые имеют закарлючки снизу, потому и появляется отступ.
А вот из ЭТОГО уже следуют теперь уже ОЧЕВИДНЫЕ вещи, что vertical-align:bottom и line-height: 0 спасут ситуацию.
УЧИТЕСЬ ИСКАТЬ КОРЕНЬ ПРОБЛЕМЫ, А НЕ СРАЗУ ЕЕ РЕШЕНИЕ, тогда все станет намного проще.
0
НЛО прилетело и опубликовало эту надпись здесь
Я имел ввиду, что автор не объяснил почему строчный елемент с таким то бейзлайном, отображается с отступом, то есть природу этого явления.
Потому что из того что елемент строчный и если ему присвоить line-height: 0 среднестатистический хабровчанин навряд ли поймет почему пропадает отступ.
А вообще, эту проблему должен знать с самого начала каждый верстальщик, а то опускаемся до песочницы…
Потому что из того что елемент строчный и если ему присвоить line-height: 0 среднестатистический хабровчанин навряд ли поймет почему пропадает отступ.
А вообще, эту проблему должен знать с самого начала каждый верстальщик, а то опускаемся до песочницы…
0
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Убираем лишний отступ внизу изображения