CODEWITHSUNDEEP
javascripthtmlcss
Bobby Francis Joseph
Bobby Francis Joseph

Reputation: 600

Get rid of space inside p tag when using a span tag

How can I bring my span immediately below the text inside the p tag

Here is the fiddle

http://jsfiddle.net/bobbyfrancisjoseph/H4U7r/

I am pasting the HTML code also here 

<p class="now-p" style="color:#000;">IN THEATERS NOW
    <br>
<span style="font-size:13px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Trailers,Songs,Ratings,Reviews & Comments</span>

    </br>
</p>

The CSS is as follows.

.now-p {
    padding-bottom:10px;
    margin-bottom: 0px;
    color:#91979e;
    text-align:left;
    font-size:36px;
    font-weight:bold;
}

I am trying to make the output look something like this:

                  IN THEATERS NOW 
     Trailers,Songs,Ratings,Reviews & Comments

Now there is a space after IN THEATERS NOW . I am not able to get rid of that

Upvotes: 1

Views: 2703

Answers (4)

Jude Duran
Jude Duran

Reputation: 2205

use CSS line-height

.now-p {
    line-height: 15px;
}

Upvotes: 0

Guffa
Guffa

Reputation: 700382

The span is immediately below the text, it's the line height of the first line of the text that causes the spacing between the lines.

Set the line height of the first text to bring them together. (And you can use padding to indent the second line instead of spaces.)

HTML:

<p class="now-p" style="color:#000;">
  <span class="header">IN THEATERS NOW</span>
  <br>
  <span class="text">Trailers,Songs,Ratings,Reviews & Comments</span>
</p>

CSS:

.now-p {
  padding-bottom:10px;
  margin-bottom: 0px;
  color:#91979e;
  text-align:left;
  font-weight:bold;
}

.now-p .header {
  font-size: 36px;
  line-height: 35px;
}

.now-p .text {
  font-size: 13px;
  padding-left: 40px;
}

Demo: http://jsfiddle.net/H4U7r/2/

Upvotes: 1

Xaltar
Xaltar

Reputation: 1716

The space is due to the <br> in the line under the <p>. If you put IN THEATERS NOW<br/> with no spaces, there won't be any more problem.

This might not be the best way to achieve what you want. But I hope it'll help to understand why you had the problem.

Upvotes: 1

Marc Lloyd
Marc Lloyd

Reputation: 304

Try removing your break tags and add this to your css:

.now-p span{
    display:block;
    font-size:13px;
}

Upvotes: 1

Related Questions