问题:span包裹的文字距离上下边框线会留有空白(如图),这是为什么呢,要怎么解决?
(https://img-ask.csdn.net/upload/201703/14/1489460975_778726.png)
HTML代码
<body>
<span class="nhm">你好吗</span>
</body>
CSS代码
<style type="text/css">
.nhm{
border:1px solid green;
}
</style>
padding为0,line-height等于font-size大小
上下的空白是由默认的行高决定的。
padding:0;
把内边距去掉.
应该有默认的样式吧,你看看浏览器那边F12看看,margin里面是不是有值
变块级元素,调整下行高。行内元素有个高度,不懂怎么消除。。
<style>
.nhm{border:1px solid green;display:inline-block;line-height:15px;font-size:15px}
</style>
<span class="nhm">你好吗</span>
把padding设置0
我照你的运行一下,并没有出现你说的问题?你还写了其他的代码吗?
完整代码是这样的:
HTML
<div class="header">
<div class="headerleft">
<span>ife.baidu.com</span>
</div>
<span class="headerright">2017.03</span>
</div>
CSS
*{
margin: 0;
padding: 0;
}
body{
width: 980px;
height:1386px;
margin:0 auto;
}
.header{
width:892px;
border-bottom: 2px solid #938e8c;
margin:0 auto;
overflow: hidden;
position: relative;
}
.headerleft{
float: left;
width:110px;
height: 61px;
background-color: #d45d5c;
position: relative;
}
.headerleft span{
display: inline-block;
font-size: 12px;
line-height: 12px;
font-family: 黑体;
color: #ffffff;
position: absolute;
bottom:0;
margin-left:7px;
border: 1px solid green;
}
.headerright{
display: inline-block;
float: right;
position: absolute;
bottom: 0;
right: 0;
font-size: 12px;
line-height: 12px;
font-family: 黑体;
color: #d45d5c;
border: 1px solid green;
}
我试了一下,如果是中文就不会出现这种情况,英文数字就会有,具体为什么,我也不知道!