CODEWITHSUNDEEP
htmlcsslayoutparagraph
user3668446
user3668446

Reputation: 31

html remove unknown whitespace

I have this 3 column layout on

CSS and 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>

it created the layout i want, however, i have a problem on the #content-main. I cant remove the "SPACE" above the paragraph..

the output looks like this one

| [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] |

Can anyone help me with this one, im still a starter at CSS.

Upvotes: 1

Views: 604

Answers (2)

stanze
stanze

Reputation: 2480

Add this in your stylesheet.

*{
    margin: 0;
    padding: 0;
}

Upvotes: -1

Pugazh
Pugazh

Reputation: 9561

Use vertical-align: top in CSS #content-main. Here is a snippet

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

Upvotes: 2

Related Questions