问答详情
源自:-

button的line-height影响对齐的问题,谁能给解释一下?

#btn1{

height: 15px;

line-height: 0;

}

#btn2{

height: 15px;

line-height: normal;

}

http://img.mukewang.com/56c9be640001787e01030024.jpg

#btn1{

height: 25px;

line-height: 0;

}

#btn2{

height: 25px;

line-height: normal;

}

http://img.mukewang.com/56c9bede0001e72201110040.jpg

提问者:sxlyq 2016-02-21 21:43

个回答

  • qq_一桥轻雨一伞开_2
    2017-08-08 14:05:01

    line-height:normal是浏览器自动计算的合适的行高,一般为font-size的1.14倍,而且每个浏览器解析的不太一样。你的代码中没写字体大小,那默认就是16px,那么行高为19px左右。第一个例子中你给的高度是15px,小于行高,我的理解是行高将button顶上去了。设置行高为0的button就不会受影响了。第二个例子中行高给了25px,比行高要高了,所以两个button近似对齐。行高并不会影响button的高度,没有文字的话两个button都是对齐的