Перейти к содержимому


Пользователь месяца
BLIK BLIK 1-й за Февраль
Очков активности: 1228 0 тем, 63 сообщения, 13 баллов репутации
ТОП самых активных за этот месяц
  • Фотография Андрей WPMasterKZ
    #1

    Андрей WPMasterKZ (wpmaster.kz)
    Очков активности: 1239 Вне конкурса за определение пользователя месяца

  • Фотография ShowPrint
    #2

    ShowPrint (ShowPrint.ru)
    Очков активности: 621 1 тема, 43 сообщения, 9 баллов репутации

  • Фотография magnet
    #3

    magnet (rbfxdirect.com)
    Очков активности: 451.5 Вне конкурса за определение пользователя месяца

  • Фотография Megoydagi
    #4

    Megoydagi
    Очков активности: 333 8 тем, 50 сообщений, 3 балла репутации

  • Фотография pozitron123
    #5

    pozitron123
    Очков активности: 202.5 5 тем, 30 сообщений, 3 балла репутации

  • Фотография maxnik
    #6

    maxnik (konovalovpavel.ru)
    Очков активности: 177 2 темы, 53 сообщения, 2 балла репутации

  • Фотография OlgaGetman
    #7

    OlgaGetman
    Очков активности: 117 Вне конкурса за определение пользователя месяца

  • Фотография BLIK
    #8

    BLIK
    Очков активности: 114 Вне конкурса за определение пользователя месяца

  • Фотография WGN
    #9

    WGN (worldgamenews.com)
    Очков активности: 99 0 тем, 33 сообщения, 2 балла репутации

  • Фотография Ixman
    #10

    Ixman (o5cat.ru)
    Очков активности: 57 Вне конкурса за определение пользователя месяца

  • Показать весь ТОП 10

Новый Teasernet

Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 26.02.2019
  • Яндекс выдача: 18.03.2019
Топ 5 участников по репутации


Неоднозначность вёрстки строчных и строчно-блочных элементов

#1 ShowPrint

ShowPrint
  • Пользователь PRO
  • 3265 сообщений
  • Репутация: 905
0

Отправлено 02 March 2019 - 12:23

Всем добра!

 

Знаю/понимаю, что строчные и строчно-блочные элементы - разные по сути, поведению и обращению с ними.

Но...

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

 

Однако упёрся в некоторое непонимание:

<a> - строчный, <button> - строчно-блочный.

Если к <a> применить свойство display:inlne-block; то по идее это должно превратить гиперссылку в строчно-блочный элемент и оба они будут строчно-блочными, соответственно и вести себя должны одинаково.

Ан нет...

Почему-то при расчёте высоты в задании размера шрифта они по разному относятся к толщине их окружающей границы (один учитывает в расчёте высоты, а второй нет).

 

Пример в песочнице: 

Внимание
Чтобы увидеть этот текст Вам необходимо авторизоваться

 

Это норма? или есть какое-то css-свойство с помощью которого можно заставить их одинаково относиться к границам?

Очень хочется  обойтись одним классом для строчных и строчно-блочных элементов, не раздувая код.

 

Оффтопик


 

 

  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#2 yury

yury
  • Пользователь
  • 647 сообщений
  • Репутация: 192

Отправлено 04 March 2019 - 12:28

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

 

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

 

В вашем случае, чтобы кнопка и ссылка выглядели одинаково, достаточно отказаться от принудительного указания размеров блока (убрать правило height: 40px;).

См пример в песочнице https://jsfiddle.net/h48e7nsx/


  • 2

#3 ShowPrint

ShowPrint
    Topic Starter
  • Пользователь PRO
  • 3265 сообщений
  • Репутация: 905

Отправлено 04 March 2019 - 13:35

@yury, спасибо огромное.

Чувствовал в чём-то подвох и (если честно), то надеялся именно на вашу подсказку.

Самый простой выход ко мне в голову и не пришёл-то  :(


  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/



Оформление форума – IPBSkins.ru