HTML删除未知的空白

Question

我有

CSS和HTML这3栏布局

#content{ 
 
    width: 100%; 
 
    padding: 0 15px 0; 
 
    margin:0px; 
 
} 
 
#content-left{ 
 
    width: 20%; 
 
    display:inline-block; 
 
} 
 
#content-main{ 
 
    width: 55%; 
 
    display:inline-block; 
 
} 
 
#content-right{ 
 
    width: 20%; 
 
    display:inline-block; 
 
}

<div id="content"> 
 
    <div id="content-left"> 
 
    <p>Lorem ipsum....</p> 
 
    </div> 
 
    <div id="content-main"> 
 
    <p>Lorem ipsum....</p> 
 
    </div> 
 
    <div id="content-right"> 
 
    <p>Lorem ipsum....</p> 
 
    </div> 
 
</div>

它创造我想要的布局，不过，我对＃问题内容为主。我不能删除“SPACE”段落上方..

输出看起来像这样一个

| [Text here] |  SPACE SPACE SPACE SPACE SPACE   | [Text here] | 
| [Text here] |  SPACE SPACE SPACE SPACE SPACE   | [Text here] | 
| [Text here] |  SPACE SPACE SPACE SPACE SPACE   | [Text here] | 
| [Text here] |[Text here][Text here][Text here][Text here]| [Text here] | 

谁能帮我这一个，即时通讯仍然在CSS首发。

Answer 1

在CSS #content-main中使用vertical-align: top。这里是一个片段

#content{ 
 
    width: 100%; 
 
    padding: 0 15px 0; 
 
    margin:0px; 
 
} 
 
#content-left{ 
 
    width: 20%; 
 
    display:inline-block; 
 
    vertical-align: top; 
 
} 
 
#content-main{ 
 
width: 55%; 
 
display:inline-block; 
 
    vertical-align: top; 
 
} 
 
#content-right{ 
 
width: 20%; 
 
display:inline-block; 
 
    vertical-align: top; 
 
}

<div id="content"> 
 
<div id="content-left"> 
 
    <p>Lorem ipsum....</p> 
 
    <p>Lorem ipsum....</p> 
 
    <p>Lorem ipsum....</p> 
 
    <p>Lorem ipsum....</p> 
 
    
 
</div> 
 
    <div id="content-main"> 
 
    <p>Lorem ipsum....</p> 
 
    <p>Lorem ipsum....</p> 
 
</div> 
 
<div id="content-right"> 
 
    <p>Lorem ipsum....</p> 
 
    <p>Lorem ipsum....</p> 
 
    <p>Lorem ipsum....</p> 
 
</div> 
 
</div>

Answer 2

在样式表中添加这一点。

*{ 
    margin: 0; 
    padding: 0; 
}