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; 
}