Проблема с вертикальными отступами span

[infidel]

Всем привет.

Не могу понять откуда берутся отступы.

<div class="mc543_minimenu">    <div class="mc543_button">        <div>            <span class="mc543_l1"></span>            <span class="mc543_l2"></span>        </div>    </div>    <div class="mc543_menuhandler"></div></div>

CSS из правой менюшки консоли хрома -

element.style {}wp.test/media="all".mc543_minimenu span {    margin: 0;    padding: 0;    display: inline-block;    width: 100%;    height: 5px;    background: #4F4F4F;}wp.test/media="all"html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {    border: 0;    font-family: inherit;    font-size: 100%;    font-style: inherit;    font-weight: inherit;    margin: 0;    outline: 0;    padding: 0;    vertical-align: baseline;}wp.test/media="all"* {    font-family: Tahoma;}Inherited from divwp.test/media="all"html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {    border: 0;    font-family: inherit;    font-size: 100%;    font-style: inherit;    font-weight: inherit;    margin: 0;    outline: 0;    padding: 0;    vertical-align: baseline;}wp.test/media="all"* {    font-family: Tahoma;}Inherited from div.mc543_buttonwp.test/media="all"html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {    border: 0;    font-family: inherit;    font-size: 100%;    font-style: inherit;    font-weight: inherit;    margin: 0;    outline: 0;    padding: 0;    vertical-align: baseline;}wp.test/media="all"* {    font-family: Tahoma;}Inherited from div.mc543_minimenuwp.test/media="all"html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {    border: 0;    font-family: inherit;    font-size: 100%;    font-style: inherit;    font-weight: inherit;    margin: 0;    outline: 0;    padding: 0;    vertical-align: baseline;}wp.test/media="all"* {    font-family: Tahoma;}Inherited from body.home.page.page-id-6.page-template-defaultwp.test/media="all"html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {    border: 0;    font-family: inherit;    font-size: 100%;    font-style: inherit;    font-weight: inherit;    margin: 0;    outline: 0;    padding: 0;    vertical-align: baseline;}wp.test/media="all"* {    font-family: Tahoma;}Inherited from html.no-jswp.test/media="all"html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {    border: 0;    font-family: inherit;    font-size: 100%;    font-style: inherit;    font-weight: inherit;    margin: 0;    outline: 0;    padding: 0;    vertical-align: baseline;}wp.test/media="all"* {    font-family: Tahoma;}

Как есть

Как должно быть по моему мнению

Не могу понять в чем дело, вроде бы в стилях нет ничего что влияло бы на эти оступы, однако они есть. Проверял в хроме и в ие.

 

UPD: Мда стили из хрома конечно некорректно отображаются здесь, многие строки перечеркнуты там... Вобщем очень надеюсь что среди форумчан есть телепаты. Иначе придется мне подумать как подать свою мысль более доходчиво.

Edited September 19, 2015 by infidel

[Vlad]

Советую в следующий раз выкладывать код на jsfiddle и давать на него ссылку.

 

У вас блоки inline-block, на них действует line-height (межстрочное расстояние, проще говоря). Поэтому <span> надо задать как display: block или заменить <span> на <div> или родителю задать line-height: 0.

[infidel]

@Vlad,  Большое спасибо за сеанс телепатии). Извиняюсь за такое оформление топика, в следующий раз обязательно воспользуюсь jsfiddle.

Edited September 19, 2015 by infidel