css - html remove unknown whitespace -
i have 3 column layout on
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>
it created layout want, however, have problem on #content-main. cant remove "space" above paragraph..
the output looks 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 me one, im still starter @ css.
use vertical-align: top
in css #content-main
. here 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>
Comments
Post a Comment