CODEWITHSUNDEEP
htmlcss
Tim C
Tim C

Reputation: 5714

CSS line height resizing browser text

I am no guru at CSS so please excuse what might be a basic question. I have an annoying problem which I can't seem to fix:

Here is my text without CSS line-height:
enter image description here

I would like to move the text up closer to the heading tags so I did this:

<h2>Loren Ipsum Dol Tjovanuu</h2>
<p style="line-height:0px;">
<i>Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</i>
</p>
<h2>Neque porro quisquam est qui dolorem ipsum</h2>
<p style="line-height:0px;">
<i>Lorem ipsum dolor sit amet, consectetur adipiscin.</i>
</p>

The Result

enter image description here

The result is perfect and exactly what I want, but... the problem comes when I resize the browser.

Problem Resizing the browser
enter image description here

My Question

Why is the text condensing on browser resize? What am I doing wrong? Should I not use the line-height property? Any workaround for this?

Upvotes: 3

Views: 1458

Answers (5)

Jordan Gray
Jordan Gray

Reputation: 16489

The line-height property is used to control how much vertical space is allocated for each line. In general, it is used to adjust how much space there is between lines within an element.

line-height: 1 means that lines are exactly big enough to fit the tallest letters and lowest descenders, with no space between. A line-height of more than 1 means there is some extra space between lines, and less than 1 will result in lines overlapping.

line-height: 0 means that a line of text has no vertical space allocated to it, so all lines will overlap each other in one line. That is what you are seeing here: the text is wrapping onto a second line, which is rendered over the top of the first line.

What you are trying to do is adjust the space between elements, not the space between lines in a single element. For this, the recommended approach is to adjust either margin or padding. Consider adjusting the margins of your elements until you have your desired vertical rhythm.

For a really detailed explanation of how all three properties work, see this CSS Tricks article on the box model.

Example

body { font-family: sans-serif; }

.cramped h2 {
  margin: 0.4em 0 0.2em;
}

.cramped p {
  font-style: italic;
  margin: 0;
}
<section class="cramped">
  <h2>Loren Ipsum Dol Tjovanuu</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</p>
  <h2>Neque porro quisquam est qui dolorem ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscin.</p>
</section>

Upvotes: 3

emmanuel
emmanuel

Reputation: 9615

Line height usage is for setting the distance (height) of each line. 0 value gives no distance so you have this problem.

You should let the line-height in the default value and reset default h2 and p element margin.

line-height

On block level elements, the line-height property specifies the minimum height of line boxes within the element.

On non-replaced inline elements, line-height specifies the height that is used to calculate line box height. On replaced inline elements such as buttons or other input element, line-height has no effect. [1]

h2, p {
  margin: 0;
}
<h2>Loren Ipsum Dol Tjovanuu</h2>
<p>
  <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</i>
</p>
<h2>Neque porro quisquam est qui dolorem ipsum</h2>
<p>
  <i>Lorem ipsum dolor sit amet, consectetur adipiscin.</i>
</p>

Reference: MDN - line-height - w3.org - line-height

Upvotes: 1

Rachel Gallen
Rachel Gallen

Reputation: 28553

try this

p{margin-top:-10px; font-style:italic;}

@media screen and (max-width:768px){
    h2{font-size:18px;}
        p{font-size:14px}
}

Upvotes: 1

Ahs N
Ahs N

Reputation: 8366

Add this to your CSS:

h2 {
    margin-bottom: -10px;
}

h2 tags have margins by default

Here is the JSFiddle demo

Upvotes: 2

Anand Dwivedi
Anand Dwivedi

Reputation: 1500

     <h2>Loren Ipsum Dol Tjovanuu</h2>
    <p style="line-height:23px;">
    <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</i>
     </p>
    <h2>Neque porro quisquam est qui dolorem ipsum</h2>
    <p style="line-height:23px;">
    <i>Lorem ipsum dolor sit amet, consectetur adipiscin.</i>
    </p>

try this it works fine on my browser

Upvotes: 2

Related Questions