Сдается мне, произошла некоторая путаница в терминологии )
Есть три типа элементов - блочные (block), строчные (inline) и строчные блоки (inline-block), которые сочетают свойства первых двух. Для строчных элементов высота не задается, она будет равна высоте шрифта (со всеми его выносными элементами). Для блочных элементов (и строчных блоков) высота не будет превышать line-height.
Тут вы не правы, есть и 4-ый тип блоков, доступ к которым нельзя получить, но они есть - это линейные блоки, они не видимы, не имеют значений фона, границ и т.д. Линеный блок - это каждая новая строка.
нифига не понял покажи на картинках (Добавление)
если ты про внешний блок, то он не увеличивается http://jsfiddle[dot]net/x89HM/6/ (Добавление)
Вообще рекомендую прочитать книгу "ИКФ - инлайновый контекст форматирования" (книга электронная, бесплатная)
Там все довольно подробно описано про инлайновые элементы
Вот тут нагляднее будет http://jsfiddle[dot]net/acSfa/
Каждая строка - это линейный блок, внутри которого находятся строковые блоки, в данном случае строковые блоки это "<span class="text1">world</span>" и "<span class="text">h</span>". В css документацие сказано, что высота линейного блока зависит ТОЛЬКО от значения line-height строковых блоков, которые находятся внутри линейного блока. В моем же примере высота линейного блока, который содержит строковый блок "<span class="text">h</span>" зависит от свойства font-size блока "<span class="text">h</span>", хотя документация говорит, что в случае, если font-size больше, чем line-height, то высота линейного блока от этого не увеличится, а лишь букву начнут залазить на другие линейные блоки.
Книгу я читал, но там оочень много, поэтому перечитывать - это как крайний вариант, если не выясню так от людей.
vertical-align там только для наглядности, в противном случае, блоки, по умолчанию, выровняются по базовой линии шрифта. Высота их всё же останется равной line-height, что наглядно видно, благодаря раскрашенному фону.
В таком случае, если высота блоков "всё же останется равной line-height", то почему линейный блок, в котором находятся строчные блоки, увеличивается при увеличение значения font-size строкового блока?
Да, высота строкового блока, как видно из вашего примера, зависит лишь от line-height. Однако, если убрать "vertical-align:top;", то на высоту линейного блока, внутри которого находится этот самым строковый блок, окажет влияние не line-height строкого блока, а его font-size. Почему?
есть пример http://jsfiddle[dot]net/x89HM/
также в css 2.1 документацие сказано: "Если значение свойства 'line-height' меньше высоты содержимого, то в итоге высота строкового блока будет меньше размера шрифта, а отображаемые глифы "расплывутся" за пределы этого блока. Если такой блок соприкасается с краями линейного блока, то отображаемые глифы могут также "наплывать" на границы смежного линейного блока."
Скажите в таком случае, пожалуйста, почему в моем примере значение свойства font-size у элемента с классом .text влияет на высоту этогоже элемента и как результат на высоту строчного блока, внутри которого находится этот элемент? Ведь из документации явно следует, что высота строчного элемента зависит ТОЛЬКО от значения line-height, а если font-size больше, чем line-height, то текст просто вылазит за пределы элемента, но при этом не влияет на его высоту.
В моем же примере, чем больше задавать значение font-size для элемента с классом .text, тем больше высота этого элемента.
Вы свой тон умерте.
Никто Вам тут ничего не должен.
В каком браузере "не пашет" ?
я не для того, чтобы оскорбить или чё-то типо того. я об одном пишу, об одной проблеме, а вы мне приводите пример кнопки. Ну как-минимум такое поведение в мозиле. В остальных браузерах клик не проверял, а вот курсор проверял - не наследуется.
В общем, всё о чём я говорю вот здесь можно увидеть, как клик то, что событие клика не передается, так и про то, что не наследуется cursor:pointer; http://jsfiddle[dot]net/S6tw4/ (Добавление)
armancho7777777 пишет:
В отличии от Вашей реализации, - адекватная кнопка.
да какая к черту кнопка. Проблема не в кнопке, а в иконке, внутри кнопки. В моём примере по ссылке в качестве иконки высутпает красный квадрат.
эта кнопка может быть с текстом, а может и без. position:absolute используется для выравнивания иконки по вертикали
armancho7777777 пишет:
Pavelbeginner пишет:
</span> </button>
Для чего ?
кнопка(button) может идти в строке текста. если внутри button не будет ничего, то кнопка будет выравниваться в строке не по базовой линии шрифта, а по нижнему краю кнопки. (Добавление)
armancho7777777 пишет:
CODE (css):
скопировать код в буфер обмена
.icon { display: block; }
не вариант т.к. на одном уровне с иконкой(тег span) может быть текст
Внутри кнопки(тег button) есть спан, который аболютно позиционируется относительно button-а. Почему-то курсор(cursor:pointer) с тега button не наследуется спаном. Если же заменить тег button на тег a(ссылка), то наследование курсора(cursor:pointer) происходит. В чем дело? Пробовал даже спану принудительно задать
Не работает! курсор при наведение не появляется. что за дела? По-моему также не передается клик тегу button, если кликнуть на спан. А если заменить тег button на тег a, то передается.
Он работает везде, но в хроме и сафари следующая ситуация:
пользователь открывает страницу, она опускается в самый низ моим кодом, все гуд. Затем пользователь скроллить, например, на 500px вверх и жмет f5, страница перезагружается, опускается моим кодом в самый низ, а затем самое неприятное - браузер поднимает страницу на 500px, на которые проскроллил пользователь до перезагрузки страницы! Как с этим бороться?
Почему такое поведение? В документацие скзаано "Метод eval возвращает значение последнего вычисленного выражения.". В данном случае последним вычесленным выражением должен быть объект {abc : 10, bba : 20}
Что я не так понимаю? Спасибо.
с другой стороны они должны выравниваться одинаково поэтому я вижу данное поведение как баг
и флоат не дает такого артефакта
потому считаю решение флоатом ближе к источнику проблемы
DelphinPRO пишет:
мне сложно сходу объяснить данный отступ
а если не сходу? (Добавление)
отрицательный margin-top тоже решит проблему (Добавление)
наверное)
Даже сходу объясняется. Как вам всем известно, есть линейный блок у которого есть базовая линия. Внутри линейного блока находятся инлайн блоки(в данном случае блоки со свойством display:inline-block;). По-умолчанию инлайн блоки имеют выравнивание baseline. У блоков со значением display:inline-block базовой линией является базовая линия последнего текста, внутри блока. Итого имеем, что в первом блоке с зеленой рамкой текста больше, чем в остальных блоках.
Поэтому в первом блоке базовая линия находится ниже, чем в остальных блоках. И эта базовая линия первого блока вешается на базовую линию линейного блока. Надеюсь понимаете о чем я? Словами довольно сложно объяснить, если что в картинках поясню. (Добавление)
Pavelbeginner пишет:
У блоков со значением display:inline-block базовой линией является базования линия последнего текста, внутри блока.
Либо, если текста внутри такого блока нету - то базовой линией является низ блока, то бишь в данном случае, если бы не было текста внутри зеленого блока, то его базовой линией являлся бы зеленый нижний бордер. (Добавление)
LIME пишет:
я этот артефакт только на web-kitвых наблюдаю
данный "артефакт" вы бы наблюдали везде, если строк текста в одном из блоков было больше, чем в другом. Видимо в других браузерах вы не наблюдали данных "артефакт" т.к. текст во всех блоках в этих браузерах имел одинаковое количество строк.
Главная
Помощь
Поиск
Пользователи
Найдено сообщений: 884
покажи на картинках 
