CODEWITHSUNDEEP
htmlcss
sodiumnitrate
sodiumnitrate

Reputation: 3131

The distance between lines in a <h1> is too little: the texts overlap

I have an <h1> which I have styled with the following CSS:

#col2 h1 {
    text-align: left;
    padding: 2.5%;
    margin-top: 0;
    margin-bottom: 0;
    width: 95%;
    background-color: #444;
    border-bottom: solid 1px black;
    cursor: pointer;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

For some reason, the text appears as follows: screenshot of the <h1>

I first guessed that this could be due to the fact I have set margin:0; but when I changed it to 2.5% the distance between the lines stayed the same and a gap appeared at the top of the dark gray area.

Upvotes: 0

Views: 806

Answers (2)

user0129e021939232
user0129e021939232

Reputation: 6355

line-height:10px;

try increasing the line height

Upvotes: 1

David Thomas
David Thomas

Reputation: 253318

Specify the line-height:

h1 {
    line-height: 1.4em; /* or whatever... */
}

Though in your posted CSS there's nothing to cause this problem, so I'd suggest using the browser's developer tools (F12 in most browsers) to inspect to see where the line-height is coming from, or from where it's being overridden.

Incidentally the margin of a block-level element exists around the outer-edges of the 'box' formed by the element, it doesn't have an effect on the spacing between the lines of text contained within that element.

Upvotes: 4

Related Questions