CODEWITHSUNDEEP
htmlcss
user3872094
user3872094

Reputation: 3351

How to have line height only for tags

I'm creating an HTML page that needs line height, for that I'm using line-height CSS. Here is my code.

.heading{
  font-size:2em;
  font-weight:bold;
}


.body{
  font-size:1.3em;
}

.container{
  max-width:75%;
  line-height:2;
}
<div class="container">

<div class="heading">
  What is Lorem Ipsum?
</div>
<div class="body">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>

My issue here is, the line height is getting applied for text even, But I want the height to be preserved only for the tags. In my current sample, I've given only 2 divs, In reality, there may be p tags even. Please let me know how can I achieve this.

Upvotes: 3

Views: 85

Answers (2)

Ammad Amir
Ammad Amir

Reputation: 518

Instead of giving line height to div it is better to use margin or padding for spacing. Line height commonly used to set the distance between lines of text & if you still want line-height in div then code is provided below

.heading{
  font-size:2em;
  font-weight:bold;
}


.body{
  font-size:1.3em;
}

.container{
  max-width:75%;
  
}
.container .heading
{
  line-height:2;
}
<div class="container">

<div class="heading">
  What is Lorem Ipsum?
</div>
<div class="body">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 273261

You are probably looking for gaps:

.heading {
  font-size: 2em;
  font-weight: bold;
}

.body {
  font-size: 1.3em;
}

.container {
  max-width: 75%;
  display:grid; /* make it grid container */
  row-gap:2em; /* add gap */
}
<div class="container">
  <div class="heading">
    What is Lorem Ipsum?
  </div>
  <div class="body">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
  <div class="footer">
  some content
  </div>
</div>

Upvotes: 1

Related Questions