How to Set the Space Between Lines in a Div Without Setting Line Height

How to set the space between lines in a div without setting line height

That can only be done using margin style. You don't need to wrap each contained DIVs with another DIV. Just use the STYLE tag.

Here's an example. Border and colorings are added for demo purpose.

<style>
    #container     {width:30ex; outline:1px solid black; padding:0 .2em; background:white;}
    #container>div {display:inline-block; margin:.2em 0; background:#fca;}
</style>
<div id="container">
    <div style="height:1em">variable</div>
    <div style="height:5em">variable stuff variable</div>
    <div style="height:2em">variable stuff</div>
    <div style="height:1em">variable</div>
    <div style="height:3em">variable stuff variable stuff</div>
    <div style="height:1em">variable</div>
    <div style="height:1em">variable</div>
    <div style="height:1em">variable</div>
    <div style="height:1em">variable</div>
</div>

How to give line spacing without using line-height property?

You can use element specific line-height. So it won't affect other elements.

HTML

<span class="text">
welcome to stack over    
flow and welcome again
</div>

CSS

body {
 line-height:1; /*Global line height*/
}

.text {
 line-height:1.5; /*Element specific line height*/
}

Line height is set to 0, why is there space between lines?

If you want to remove the vertical space, change the vertical-align property to something other than the default value which is baseline (vertical-align: baseline).

.foo2 {
    vertical-align: top;
}

When the value is set to baseline this vertical space is reserved for letters such as j, y, p, q.

body {  margin: 0;  padding: 0;}.wrap1 {  font-size: 20pt;  line-height: 0;}.wrap2 {  font-size: 40pt;  line-height: 0;}.wrap3 {  font-size: 60pt;  line-height: 0;}.foo2 {  display: inline-block;  line-height: 0;  font-size: 0;  vertical-align: top;}.foo2 p {} .foo2 span {  font-size: 16pt;  line-height: 1.2;  display: block;  background: #ccc;}

<div class="wrap1">  <div class="foo2">    <p><span>text1</span>    </p>  </div>  <div class="foo2">    <p><span>2text</span>    </p>  </div>  <br>  <div class="foo2">    <p><span>3biggertext</span>    </p>  </div>  <div class="foo2">    <p><span>4text</span>    </p>  </div></div><div class="wrap2">  <div class="foo2">    <p><span>text1</span>    </p>  </div>  <div class="foo2">    <p><span>2text</span>    </p>  </div>  <br>  <div class="foo2">    <p><span>3biggertext</span>    </p>  </div>  <div class="foo2">    <p><span>4text</span>    </p>  </div></div><div class="wrap3">  <div class="foo2">    <p><span>text1</span>    </p>  </div>  <div class="foo2">    <p><span>2text</span>    </p>  </div>  <br>  <div class="foo2">    <p><span>3biggertext</span>    </p>  </div>  <div class="foo2">    <p><span>4text</span>    </p>  </div></div>

Minimize the space between a link lines, when the a link text spanes on multiple lines

line-height does not affect directly elements with display:inline such as is the default with spans and anchor links.

The line-height CSS property sets the amount of space used for lines, such as in text. On block-level elements, it specifies the minimum height of line boxes within the element.

^MDN

Option 1

Apply the line-height to the div

div {
  width: 150px;
  line-height: 9px;
  margin: 1em auto;
}

span {
  background: pink;
  font-size: 9px;
}

<div><span>
<a target="_blank" href="https://*********-45937924">
World's longest sea crossing: ******** ****** bridge opens</a>
</span></div>

Set line spacing

Try the line-height property.

For example, 12px font-size and 4px distant from the bottom and upper lines:

line-height: 20px; /* 4px +12px + 4px */

Or with em units

line-height: 1.7em; /* 1em = 12px in this case. 20/12 == 1.666666  */

How to change line height of wrapped div text without increasing margin?

.footer-section:not(.footer-section.copyright ) {
    margin-top: 15px;
    line-height: 100%;
}

.footer-section.copyright {
    line-height: 200%;
}

If I'm getting the question right, you want the line-height property to be applied to only the copyright text, in which case this might do the trick. Also codepen: https://codepen.io/flyingDonut/pen/BaKRxNd

CSS to remove the spacing between the lines

Best you can do is to remove margin / padding from the p tag and adjust the line height.

As an example check this out https://codepen.io/anon/pen/bRGzNW

Html:

<div id="content2">
   <p class="t1">testGg</p>
   <p class="t1">testgG</p>
   <p class="t1">testGg</p>
</div>

Css:

#content2 {
    clear: both;
    overflow: auto;
}

.t1 {
    font-weight: bold;  
    font-size:60px; 
    line-height:60px;
    color: black;
    text-align: center;
}

p {
    padding : 0;
    margin : 0;
}

---

Related Topics