X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Неоднозначность вёрстки строчных и строчно-блочных элементов
ShowPrint
ShowPrint
Topic Starter сообщение 2.3.2019, 13:23; Ответить: ShowPrint
Сообщение #1


Всем добра!

Знаю/понимаю, что строчные и строчно-блочные элементы - разные по сути, поведению и обращению с ними.
Но...
Всегда был уверен, что при помощи css-свойства display можно трансформировать поведение элементов.

Однако упёрся в некоторое непонимание:
<a> - строчный, <button> - строчно-блочный.
Если к <a> применить свойство display:inlne-block; то по идее это должно превратить гиперссылку в строчно-блочный элемент и оба они будут строчно-блочными, соответственно и вести себя должны одинаково.
Ан нет...
Почему-то при расчёте высоты в задании размера шрифта они по разному относятся к толщине их окружающей границы (один учитывает в расчёте высоты, а второй нет).

Пример в песочнице: [mwhide=0]https://jsfiddle.net/1jsfmeuc/1/[/mwhide]

Это норма? или есть какое-то css-свойство с помощью которого можно заставить их одинаково относиться к границам?
Очень хочется  обойтись одним классом для строчных и строчно-блочных элементов, не раздувая код.

[offtopic]Лирическое отступление отражающее моё состояние: "Стою на асфальте, в лыжи обутый: то ли лыжи не едут, то ли я долбанутый..."[/offtopic]
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
yury_mw
сообщение 4.3.2019, 13:28; Ответить: yury_mw
Сообщение #2


(ShowPrint @ 2.3.2019, 16:23) *
Это норма? или есть какое-то css-свойство с помощью которого можно заставить их одинаково относиться к границам? Очень хочется  обойтись одним классом для строчных и строчно-блочных элементов, не раздувая код.


Так исторически сложилось, что кнопки (и прочие элементы форм) ведут себя по особенному, не как другие блоки.

В вашем случае, чтобы кнопка и ссылка выглядели одинаково, достаточно отказаться от принудительного указания размеров блока (убрать правило height: 40px;).
См пример в песочнице https://jsfiddle.net/h48e7nsx/
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ShowPrint
ShowPrint
Topic Starter сообщение 4.3.2019, 14:35; Ответить: ShowPrint
Сообщение #3


yury_mw, спасибо огромное.
Чувствовал в чём-то подвох и (если честно), то надеялся именно на вашу подсказку.
Самый простой выход ко мне в голову и не пришёл-то  :(


Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
2 чел. читают эту тему (гостей: 2, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыКорректность показа вёрстки изображений на разных гаджетах
Не сохраняются пропорции изображений на смартфонах
1 master-vek 37245 25.3.2021, 13:22
автор: tedder
Открытая тема (нет новых ответов) Дизайн кнопок, доработка элементов графики
Требуется исполнитель
5 ARsHi 1406 6.10.2020, 20:04
автор: JOHNY
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыДизайн сайта и отдельных элементов
Все в срок
145 Infe 70207 20.10.2018, 16:51
автор: Infe
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыПроблема вёрстки адаптивной страницы на divах
28 master-vek 4713 8.2.2018, 19:29
автор: master-vek
Открытая тема (нет новых ответов) Изменение внешнего вида элементов
0 vantusxyz 5932 26.6.2016, 1:03
автор: -vantusxyz-


 



RSS Текстовая версия Сейчас: 29.3.2024, 14:20
Дизайн