Почему padding для span ведёт к проблемам с вёрсткой?

/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .html4strict.geshi_code {font-family:monospace;} .html4strict.geshi_code .imp {font-weight: bold; color: red;} .html4strict.geshi_code .kw2 {color: #000000; font-weight: bold;} .html4strict.geshi_code .kw3 {color: #000066;} .html4strict.geshi_code .es0 {color: #000099; font-weight: bold;} .html4strict.geshi_code .br0 {color: #66cc66;} .html4strict.geshi_code .sy0 {color: #66cc66;} .html4strict.geshi_code .st0 {color: #ff0000;} .html4strict.geshi_code .nu0 {color: #cc66cc;} .html4strict.geshi_code .sc-1 {color: #808080; font-style: italic;} .html4strict.geshi_code .sc0 {color: #00bbdd;} .html4strict.geshi_code .sc1 {color: #ddbb00;} .html4strict.geshi_code .sc2 {color: #009900;} .html4strict.geshi_code span.xtra { display:block; }

<span style="padding:100px"><a href="#">Foo</a></span>


<span style="padding:100px">Bar</span>
 


Есть вот такой просто вроде бы код.
Но если его открыть в браузере, то кликнуть на ссылку не получится.
Понимаю, что из-за вертикального padding у нижнего (Bar) span'а.
span — не блочный элемент, ему нельзя давать padding-top/bottom.
По сути, они (ссылка и нижний span) находятся на одной z-оси, но нижний элемент перекрыл верхний.
0
css html padding span style

1 ответов

В отличие от margin'a, у padding'a нет таких ограничений касательно типов элементов (и видов display), к которым может быть применено это правило. И инлайновые элементы входят в группу элементов, к которым это правило применимо - в том числе и padding-top/padding-bottom. Отсутствие визуального padding-top у инлайновых элементов обусловлено лишь тем, что высота этих элементов подчиняется высоте строки (line-height) этих элементов, а их padding'и не влияют на общие размеры бокса.

Вот наглядный пример.

2