对齐问题和文本间距

时间:2013-09-14 19:39:44

标签: html css

我遇到了DIV的问题(尝试复制名片)。 http://jsfiddle.net/FvpPk/1/

我无法摆脱线条之间的额外空间。我尝试了底边:H1和P的1px,但没有成功。我该怎么办? (注意在实现normalize.css之前没关系,但我无法找到normalize.css中的内容导致这种情况)

感谢您的帮助

<div id="addressbox">
    <h1>ifdhod doifhdosfh odhfdsofhdo</h1>
    <p> 546, avenue ffds dfdsfd</p>
    <p> A-1234 fdfdfsf (Austria)</p>
    <div id="addressbox-bottom">
    <ul id="contact">
<li><i class="icon-phone-sign"></i> +352 691 123.456</li>
<li><i class="icon-envelope"></i><a href="#"> geyi@iyiyiy.com</a></li>
<li><i class="icon-map-marker"></i><a href="#"> itinéraire</a></li>

</ul>
    </div>



#addressbox {
    position: absolute;
    top: 10px;
    left: 20px;
    padding: 0 10px 10px 15px;
    width: 355px;
    height: 120px;
    background: #fff;
    box-shadow: 0 0 5px 2px #ccc;
}
#addressbox-bottom {
    position: absolute;
    bottom: 5px;
    left: 0px;
    padding: 3px 10px 10px 15px;
    width: 355px;
    height: 20px;
    background: #2970A2;
}
#addressbox h1 {
    padding: 0;
    margin-bottom: 1px;
    color: #333;
    font-weight: 700;
    font-size: 13px;
}
#addressbox p {
    color: #667878;
    font-weight: 400;
    font-size: 13px;
}

#contact li {
    display: inline;
    padding-top: 5px;
    padding-right: 5px;
    color: #fff;
    list-style: none;
    font-weight: 500;
    font-size: 13px;
}
#contact li a {
    border-bottom: none;
    text-decoration: none;
    color: #fff;
    font-weight: 500;
    font-size: 13px;
}

1 个答案:

答案 0 :(得分:0)

不确定这是否是你想要的。

http://jsfiddle.net/FvpPk/2/

#addressbox {
    position: absolute;
    top: 10px;
    left: 20px;
    padding: 0 10px 10px 15px;
    width: 355px;
    height: 120px;
    background: #fff;
    box-shadow: 0 0 5px 2px #ccc;
}
#addressbox-bottom {
    position: absolute;
    bottom: 5px;
    left: 0px;
    padding: 3px 10px 10px 15px;
    width: 355px;
    height: 20px;
    background: #2970A2;
}
#addressbox h1 {
    padding: 0;
    margin-bottom: 1px;
    color: #333;
    font-weight: 700;
    font-size: 13px;
}
#addressbox p {
    color: #667878;
    font-weight: 400;
    font-size: 13px;
    line-height: 0.50;
}

#contact{
    margin-top: 5px;
}

#contact li {
    display: inline;
    /*padding-top: 5px;*/
    padding-right: 5px;
    color: #fff;
    list-style: none;
    font-weight: 500;
    font-size: 13px;
}
#contact li a {
    border-bottom: none;
    text-decoration: none;
    color: #fff;
    font-weight: 500;
    font-size: 13px;
}