Question

我有两个div在浏览器中预览时它们之间有很大差距。

代码：

<div id="title-1">
        <p>XXX is pleased to announce the launch of our Social Enterprise - Experience Us</p>
    </div>
    <div id="maindescription-1">
        <p>XXX are conducting unique tours to celebrate us, the beating heart of our culture in Scotland.  We will be 
        taking people on a journey through Glasgow, Scotland on a guided tour about the stories of the locals and pioneers that
        made Glasgow what it is today, and then expanding the experiences with tasting tours of the variety of delicious cuisines
        on offer.  Please see below for more information:</p>

CSS：

#title-1 {
    font: normal normal bold 100% "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
    float: left;
    width: 850px;
    padding: 10px;
    color: #FFFF00;
    text-align: justify;
    vertical-align: baseline;
}
#maindescription-1 {
    font: 100% "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
    float: left;
    width: 850px;
    padding: 10px;
    color: #FFFFFF;
    text-align: justify;
    vertical-align: baseline;
}

如何解决这个问题？

Answer 1

您可以使用重置来防止浏览器默认设置偷偷摸摸。我喜欢Eric Meyer的重置： http://bkaprt.com/rwd/9/

Answer 2

只调整元素<p>的边距和填充（默认情况下，在每个浏览器上默认应用）

e.g。

p {
    margin : 1em 0 0 0; // or 0
    padding : 0;
}

Answer 3

首先你需要关闭最后一个div

    <div id="title-1">
            <p>XXX is pleased to announce the launch of our Social Enterprise - Experience Us</p>
        </div>
        <div id="maindescription-1">
            <p>XXX are conducting unique tours to celebrate us, the beating heart of our culture in Scotland.  We will be 
            taking people on a journey through Glasgow, Scotland on a guided tour about the stories of the locals and pioneers that
            made Glasgow what it is today, and then expanding the experiences with tasting tours of the variety of delicious cuisines
            on offer.  Please see below for more information:</p>    
</div>

你应该将p的余量设为0

p 
{
    margin : 0;
}

文字之间差距很大，如何修复？

3 个答案: