html 删除未知空格

Question

我在

上有这个 3 列布局

CSS 和 HTML

#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>

它创建了我想要的布局，但是，我在#content-main 上遇到了问题。我无法删除段落上方的 "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;
}

html 删除未知空格

html remove unknown whitespace

html

css

layout

paragraph