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


Конкурс "Лучший отзовик"
× Быстрый вопрос
Пользователь месяца
Vmir Vmir 1-й за Апрель
Очков активности: 1 548 8 тем, 62 сообщения, 12 баллов репутации
ТОП самых активных за этот месяц
  • Фотография Андрей WPMasterKZ
    #1

    Андрей WPMasterKZ (wpmaster.kz)
    Очков активности: 162 1 тема, 24 сообщения, 4 балла репутации

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

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

  • Фотография Роман Зеленков
    #3

    Роман Зеленков
    Очков активности: 76.5 7 тем, 30 сообщений, 1 балл репутации

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

    Megoydagi (24ho.ru)
    Очков активности: 57 2 темы, 13 сообщений, 2 балла репутации

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

    r0mZet (rz-style.ru)
    Очков активности: 54 1 тема, 9 сообщений, 3 балла репутации

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

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

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

    dos1k (dos1k.ru)
    Очков активности: 21 2 темы, 8 сообщений, 1 балл репутации

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

    Mandarin
    Очков активности: 21 0 тем, 14 сообщений, 1 балл репутации

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

    kolver
    Очков активности: 21 2 темы, 8 сообщений, 1 балл репутации

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

    agrx (key-assort.ru)
    Очков активности: 19.5 0 тем, 13 сообщений, 1 балл репутации

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


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

#1 ShowPrint

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

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

Всем добра!

 

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

Но...

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

 

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

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

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

Ан нет...

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

 

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

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

 

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

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

 

Оффтопик


 

 

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


#2 yury

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

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

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

 

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

 

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

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


  • 2

#3 ShowPrint

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

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

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

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

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


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



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