Trying to stack lines closely in HTML

0
votes

This should be simple, but I'm not getting it. I'm trying to get three lines (one small-font, one big, one small) to stack against each other with single-spacing. Instead, the big-font line always has a double-space above it (for 48-pt, there's a 48-pt line above it).

I've played with margins, padding, height, borders; I've stripped everything out but the bare essentials, and I still can't get the top and middle lines to lie nicely against each other.

Code:

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>

<div style="
  font-size:16px; 
  height:16px;
  padding:0px;
  border:0px;
  margin:0px">
  <p>Line 1<p></div>

<div style="
  font-size:48px; 
  height:48px;
  padding:0px;
  border:0px;
  margin:0px">
  <p>Line 2</p></div>

<div style="
  font-size:16px; 
  height:16px;
  padding:0px;
  border:0px;
  margin:0px">
  <p>Line 3</p></font>


</html>
3
htmlspacing

3 Answers

0
votes

Try removing the p tags they are unnecessary in the markup:

<div style="
  font-size:16px; 
  height:16px;
  padding:0px;
  border:0px;
  margin:0px">
  Line 1</div>

<div style="
  font-size:48px; 
  height:48px;
  padding:0px;
  border:0px;
  margin:0px">
  Line 2</div>

<div style="
  font-size:16px; 
  height:16px;
  padding:0px;
  border:0px;
  margin:0px">
  Line 3</div>

JS Fiddle: http://jsfiddle.net/TSLA7/

If you absolutely need the p tags just remove their padding and margin:

p{
    padding: 0px;
    margin: 0px;
}
0
votes

Try to use line-height instead to get rid of extra space between blobs.

p { 
    line-height:0.7;
    margin:0
}

http://jsfiddle.net/C4mFX/

0
votes

Let's keep things really simple here. What you are looking for is line-height and margin.

http://jsfiddle.net/TSLA7/1/

So, let's remove and simplify the html a little.

<div class='stacked_lines'>
    <div>
        <p>Line 1</p>
    </div>

    <div style="font-size:48px;">
        <p>Line 2</p>
    </div>

    <div>
        <p>Line 3</p>
    </div>
</div>

And in some CSS:

.stacked_lines div {
    line-height:1;
    font-size:16px;
}

.stacked_lines p {
    margin:0; 
}

So, we now didn't have to specify a height on the divs – they are 1 times the font size (i.e., the same as the font size!)

We have dropped the margin on the p elements, meaning they stack as needed.