vandelay vandelay - 1 month ago 16
CSS Question

paragraph clustering when line breaks

How can I make my paragraph not clustering all the text up when there's a line break?

I'd like to still have a line break. But it should be in a more orderly fashion.

I attached an image to show.

enter image description here

<div class='se'>
<p>Aerospace/Defense - Major Diversified</p>
<p>Aerospace/Defense Products & Services</p>
<p>Cement</p>
<p>Diversified Machinery</p>
</div>

.sector3 {
position: absolute;
width: 33%;
height: 100%;
padding-left: 15px;
line-height: 40%;
}

Answer

Remove line-height: 40%; that change the height of each line.

To change the space between p use margin:5px 0; for the p of your parent.

If you want to know more about line-height read this.

Working DEMO.

.one {
    width: 33%;
    height: 100%;
    padding-left: 15px;
    line-height: 40%;
}
.two {
    width: 33%;
    height: 100%;
    padding-left: 15px;
}
.two p {
    margin:5px 0;
}
<h2>
Yours:
</h2>
<div class="one">
    <p>Aerospace/Defense - Major Diversified</p>
    <p>Aerospace/Defense Products Services</p>
    <p>Cement</p>
    <p>Diversified Machinery</p>
</div>
<h2>
Without 'line-height: 40%':
</h2>
<div class="two">
    <p>Aerospace/Defense - Major Diversified</p>
    <p>Aerospace/Defense Products Services</p>
    <p>Cement</p>
    <p>Diversified Machinery</p>
</div>

Comments