How Can I Use Line-height Without Affecting Caret Height?
In a contenteditable div I'm using line-height to add some line space when I have multiple lines. This is a sample div showing the issue:
div {
padding: 50px;
width: 90px;
line-height: 2em;
}
divspan {
display:inline-block;
}
divspan:nth-of-type(1) {
line-height: 1em;
color: Red;
}
divspan:nth-of-type(2) {
line-height: 10px;
color: Orange;
}
divspan:nth-of-type(3) {
line-height: normal;
color: Green;
}
divspan:nth-of-type(4) {
line-height: .5em;
font-size: .5em;
height: 5px;
color: Blue;
}<divcontenteditable="true">
line height line height line height
<span>line height</span><span>line height</span><span>line height</span><span>line height</span></div>Solution 2:
Try using padding instead of line-height and change display to inline-block:
<spanstyle="padding: 10px 0; display: inline-block;">padding</span>
Post a Comment for "How Can I Use Line-height Without Affecting Caret Height?"