CODEWITHSUNDEEP
htmlcsstextwhitespace
halmi4
halmi4

Reputation: 334

css - Why is there a big white space between text lines?

I'm working on a website and currently working on the middle box. The news will be in the middle box but its a big white space between the text lines.

It looks like this: enter image description here

How could I make the lines to be closer to each other.

For example:

Hello World!
This is a test

instead of

Hello World!

This is a test

I'm using < p > tags.

I can't find anything that would fix it. There's no padding that will effect it and no margin or something either. I've also tried applying the line-height to the <p> tags

Upvotes: 0

Views: 6940

Answers (6)

Istiak Tridip
Istiak Tridip

Reputation: 199

<style>
p {
-webkit-margin-before: 0px;
-webkit-margin-after: 0px;
}
</style>

you can also try this

Upvotes: 0

Friso van Dijk
Friso van Dijk

Reputation: 669

Basically the <p> tag is meant for a new alinea. When you want to print things line by line I'd advise using <br />, which makes your intensions clearer.

Also, you could set the margin to 0, as others have pointed out. Best to do that in a seperate span/div, as not to affect the rest of the page. Example below.

.no-space-p p {
    margin: 0;
    padding: 0;
}
<p>First line</p>
<p>Second line</p>

<p>Third line
    <br/>Fourth line</p>

<span class="no-space-p">
    <p>Fifth line</p>
    <p>Sixth line</p>
</span>

Upvotes: 0

Jigisha Variya
Jigisha Variya

Reputation: 207

You can add css for that. use like below. It will decrease the space height between 2 lines according u set.

<style>
p {
    line-height: 100%;
}

</style>

Upvotes: 0

deviloper
deviloper

Reputation: 7240

to set the space between the paragraphs, simply set the margins:

p{
    margin-bottom: 0px; // or any other value
}

and to set the spacing of the lines in a paragraph use line-height!

Upvotes: 2

SKeurentjes
SKeurentjes

Reputation: 1878

It could be line-height, or maybe you have set a margin/padding on the p

Upvotes: 1

Tushar Gupta
Tushar Gupta

Reputation: 15923

p,h2{
    line-height:0px
    }
<h2>Hello world</h2>
<p>ajsdkjahsdhalkshdklashdkjhasjdklajshdkjashdl</p>
<p>ajsdkjahsdhalkshdklashdkjhasjdklajshdkjashdl</p>

You can use line-height CSS property, It will allow you to change the gap as desired

Upvotes: 3

Related Questions