Почему ссылка вылазит за рамки блока и как это исправить?

Question

[minaev007]

вот есть плитки, предполагаемые кнопки - https://jsfiddle.net/jgb9f7v4/
Однако перейти по ссылки можно не только в пределах черного квадрата, но и в зоне между ними. Объясните пожалуйста почему. И помогите оптимизировать код так, чтоб клик был возможен только внутри блока. Заранее благодарен

Answer 1

[tyzberd]

https://jsfiddle.net/tyzberd/jgb9f7v4/1/

Answer 2

[koanvl]

Используйте margin для указания отступов между квадратами. padding - это внутренний отступ. который входит в размер элемента. Вы указали ширину и высоту ссылки 100%, вот она и разместилась на ширину всего квадарата, учитывая его паддинги. А вообще, используйте flexbox и будет вам счастье!

Comments

[minaev007]

ситуация требовала использования именно такой разметки и стилей. Но кстати. margin может быть коварным, там же если два margin пересекаются то браузер выбирает один наибольший. Ну и когда я ставил ссылку во вложенный div она все равно вылазила в общий
вот по поводу flexbox вы правы на все 100. работаю над этим))