How can I remove the blank space below japanese characters?

user_4448467 0
Viewed 419

I have some code hosted here. When you highlight the character it has a large empty space below it which covers the input box meaning it is hard to click on the input box. This issue persists when the character is not highlighted.

I have tried many methods including changing line-height, changing position values, changing the height of the div, all to no avail.

Is there a way to make the area of the character smaller?

character highlightedcharacter normal

I have made a code snippet to show the problem here:

#character {
  height: 400px;
  font-size: 20em;
  position: absolute;
  background-color: beige;
}

#wrapper {
  position: relative;
  height: 400px;
 }
<div id="wrapper"><span id="character">い</span></div>
<span><input value="try to click me"></span>

special-characters css html
1 Answers

CSS line height, check out the fiddle I inserted. make sure you don't have an overriding css rule that is cascading down. Add some padding to the top for the adjustment of line height if needed. 

#w_lineheight {
  padding-top: 4px;
  line-height: .9em; 
  background-color: #ccc; 
}

#no_lineheight {
  background-color: #bbb;
}
<div id="w_lineheight">
    あ か ば ぱ ま や わ  ---- added lineheight of .9em
</div>
<div id="no_lineheight">
    さ ざ た だ な は ら  ---- No lineheight added here
</div>

user_15335920
Related