Проблема с line-height

Hol1killer · July 22, 2013

Возникла проблема с line-height

Вот есть шапочка. верстаю

Проблема в том что когда вешаю на body line-height он воздействует как margin-top;

Вот html разметка


<body>
<div class="header">
<table class="header-inner">
<tr>
<td colspan="3" class="header-menu"> <ul> <li> <a href="#">О компании</a> </li> <li> <a href="#">Доставка и оплата</a> </li> <li> <a href="#">Контакты</a> </li> <li> <a href="#">Помощь</a> </li> </ul> </td>
</tr>
<tr>
<td class="logo-block"> <div class="logo"> </div> </td>
<td class="time-block"> <div class="time"> <div class="icon"> </div> <div class="text"> Режим работы магазина:<br /> с <span>9:00</span> до <span>19:00</span></div> </div> <div class="week"> </div> </td>
<td class="phone-block"> <div class="phone"> <sub>(495)</sub><span>960-58-78</span></div> <div class="email"><a href="#">info@gefest-stal.ru</a></td>
</tr>
</table>
</div>
</div>
</body>

Вот CSS разметка


html,body { padding:0; margin:0; height:100%; }
body { background:#FFF; width:100%; font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:24px; border-top:10px #4D4D4D solid; }
.header { height:185px; background:url(../images/template/bg-header.jpg) no-repeat; }
.header-inner { width:1000px; margin:0 auto; }
.header .logo-block { width:9%; vertical-align:top; }
.header .time-block { width:30%; vertical-align:top; padding-left:30px; }
.header .phone-block { width:61%; vertical-align:top; text-align:right;}
.header-menu { text-align:right; }
.header-menu ul { margin-top:20px; display:inline-block; }
.header-menu li { display:inline-block; }
.header-menu li:last-child a{ border-right:0; margin-right:0; padding-right:0; }
.header-menu a { color:#666; margin-right:10px; padding-right:10px; border-right:1px #999 solid; }
.logo { background:url(../images/template/logo.png) no-repeat; width:217px; height:120px; margin-top:10px; }
.time { position:relative; margin-top:20px; }
.time .icon { position:absolute; left:5px; top:0; background:url(../images/template/time.png) no-repeat; width:42px; height:42px; }
.time .text { margin-left:60px; line-height:22px; }
.time .text span { font-weight:bold; }
.week { background:url(../images/template/week.png) no-repeat; width:185px; height:30px; margin:10px 0 0 15px; }
.phone { position:relative; margin-top:40px;}
.phone sub { color:#666; font-size:20px; padding-right:10px; }
.phone span { color:#000; font-size:34px; }
.email { margin-top:40px; }
.email a { font-size:22px; color:#FF8000; }

Все делаю на локалхосте, не понимаю поведение line-height. Никогда такого поведения не видел. Собственное если изменяюю body{line-height:0} - то отсуп уходит.

Edited July 22, 2013 by Hol1killer

npofopr · July 22, 2013

Все делаю на локалхосте

можно и сюда сложить http://jsfiddle.net/

http://htmlbook.ru/css/line-height

Межстрочный интервал. У вас в шапке кругом, ну почти, строчные элементы, вот он и выставляет им.

Edited July 22, 2013 by npofopr

Hol1killer · July 22, 2013

Межстрочный интервал. У вас в шапке кругом, ну почти, строчные элементы, вот он и выставляет им.

Ну это понятно и что с того?

Так почему он сдвигает <div class="header"> он же не может воздействовать на него?

И если я изменю все inline элементы на блочные то все пройдет?

Просто я на body уже несколько лет вешаю line-height и никогда такого поведения не видал, хотя в шапке так же использую inline элементы.

Edited July 22, 2013 by Hol1killer

Sign In

Проблема с line-height

Question

Hol1killer

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

npofopr

Link to comment

Share on other sites

Hol1killer

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information