Удалите лишнее пространство из div с помощью display: inline table? - PullRequest
Новая
       14

Удалите лишнее пространство из div с помощью display: inline table?

1 голос
/ 12 августа 2010

Это так раздражает. В Firefox и Opera я получаю отступы между вложенными тегами div, но не в Chrome и Safari.

Я пытался border-collapse:collapse

Но не повезло, есть идеи? Это дополнительное пространство портит мой жидкий нижний колонтитул (все значения div составляют до 100%, но поскольку Opera и Firefox добавляют это пространство, я никогда не просил (!), Оно переполняется.

Вот мой код:

Html: 

<div id="footer">

<div class="info" id="message">&nbsp;&nbsp;Coming Soon</div>
<div class="info" id="address">The Studio 22 Belsham Street London E9 6NG</div>
<div class="info" id="telephone">+44 (0) 778 079 6488</div>
<div class="info" id="enquiries">Enquiries</div>
<div class="info" id="mailingList">Mailing List ___________________ Submit&nbsp;&nbsp;</div>

</div>

CSS: 

#footer {
z-index:3;
position:fixed; 
bottom:0; 
width:100%; 
padding: 0;
padding-bottom: 10px;
display: table;
margin: 0;
border-collapse: collapse;


}

.info{
margin:0;
padding: 0;
display: inline-table;
border: red 1px dashed;
}

#message {
    width:10%;
}

#address {
width:33%;
text-align:center;
}

#telephone {
width:20%;
text-align:center;
}

#enquiries {
width:5%;
text-align:center;
}

#mailingList {
width:29%;
text-align: right;
}

1 Ответ

3 голосов
/ 12 августа 2010

Ответ: изменено свойство inline-table на table-cell.

Имеет смысл ...

Надеюсь, это кому-нибудь поможет.

...