对a标签设置字体大小的时候会如何影响包容他的p标签的外边距和高度？ 200
当我分别在css中的p选择器中设置font-size:12px;和pa选择器设置font-size:12px;时，p标签的高度改变，外边距也发生了改变，这是为什么？这是h...
当我分别在css中的p选择器中设置font-size:12px;和p a选择器设置font-size:12px;时，p标签的高度改变，外边距也发生了改变，这是为什么？
这是html代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>家用电器分类</title>
<link href="css/type.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="type">
<div id="title">家用电器</div>
<div class="secondTitle"><a href="#">大家电</a></div>
<p><a href="#">平板电视</a> <a href="#">洗衣机</a> <a href="#">冰箱</a><br/>
<span> </span><a href="#">空调</a> <a href="#">烟机/灶具</a> <a href="#">热水器</a><br/>
<span> </span><a href="#">冷柜/酒柜</a> <a href="#">消毒柜</a> <a href="#">家庭影院</a></p>
</div>
</body>
</html>
这是css代码：
@charset "gb2312";
/* CSS Document */
#type {
width:800px;
}
#title {
font-size:18px;
text-indent:1em;
background-color:#0f7cbf;
line-height:35px;
color:#FFF;
font-weight:bold;
}
.secondTitle {
background-color:#e4f1fa;
text-indent:2em;
font-size:14px;
line-height:30px;
font-weight:bold;
}
.secondTitle a {
color:#0f7cbf;
text-decoration:none;
}
.secondTitle a:hover {
text-decoration:underline;
}
p {
line-height:20px;
text-indent:1em;
}
p a {
font-size:12px;
color:#666666;
text-decoration:none;
}
p a:hover {
color:#F60;
text-decoration:underline;
} 展开
这是html代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>家用电器分类</title>
<link href="css/type.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="type">
<div id="title">家用电器</div>
<div class="secondTitle"><a href="#">大家电</a></div>
<p><a href="#">平板电视</a> <a href="#">洗衣机</a> <a href="#">冰箱</a><br/>
<span> </span><a href="#">空调</a> <a href="#">烟机/灶具</a> <a href="#">热水器</a><br/>
<span> </span><a href="#">冷柜/酒柜</a> <a href="#">消毒柜</a> <a href="#">家庭影院</a></p>
</div>
</body>
</html>
这是css代码：
@charset "gb2312";
/* CSS Document */
#type {
width:800px;
}
#title {
font-size:18px;
text-indent:1em;
background-color:#0f7cbf;
line-height:35px;
color:#FFF;
font-weight:bold;
}
.secondTitle {
background-color:#e4f1fa;
text-indent:2em;
font-size:14px;
line-height:30px;
font-weight:bold;
}
.secondTitle a {
color:#0f7cbf;
text-decoration:none;
}
.secondTitle a:hover {
text-decoration:underline;
}
p {
line-height:20px;
text-indent:1em;
}
p a {
font-size:12px;
color:#666666;
text-decoration:none;
}
p a:hover {
color:#F60;
text-decoration:underline;
} 展开
展开全部
有兴趣读读两篇文章
'http://www.zhihu.com/question/20407685'
Line height calculations: the 'line-height' and 'vertical-align' properties
‘http://www.w3.org/TR/CSS2/visudet.html#inline-non-replaced’
The height of a line box is determined as follows:
1.The height of each inline-level box in the line box is calculated. For replaced elements, inline-block elements, and inline-table elements, this is the height of their margin box; for inline boxes, this is their 'line-height'. (See "Calculating heights and margins" and the height of inline boxes in"Leading and half-leading".)
2.The inline-level boxes are aligned vertically according to their 'vertical-align' property. In case they are aligned 'top' or 'bottom', they must be aligned so as to minimize the line box height. If such boxes are tall enough, there are multiple solutions and CSS 2.1 does not define the position of the line box's baseline (i.e., the position of the strut, see below).
3.The line box height is the distance between the uppermost box top and the lowermost box bottom. (This includes the strut, as explained under'line-height' below.)
我先跟你说原因吧，
p设置了line-height:20px;
但是p的实际高度是66px 多出来了6个像素就是因为a标签的高度被错误计算了
上面英文说了它的高度是由3点决定，上面第2点最关键，如果你想计算最小的高度，那么你必须给他设置vertical-align为top或者bottom，这个地方你设置子元素a标签vertical-align:top;也能得到
p标签设置font-size:12px的效果，我其实也不算太明白为什么设置p的font-size会得到那样的效果，推测，估计是设置font-size，会调整基线的位置吧
另外延伸出，我以前也遇到的一个问题，div高度不设置包住一个img元素
div里面包含一个img元素和你遇到的这个问题一样，div的高度我们会认为应该＝img自身高度，但是实际上大于img高度，就在于基线的问题，反正这个挺复杂的，记住如果要计算行内元素的最小高度，一定要设置他的vertical－align为top或者bottom
如果题主看了文章有什么比较好的发现，也可以告知下，互相学习
'http://www.zhihu.com/question/20407685'
Line height calculations: the 'line-height' and 'vertical-align' properties
‘http://www.w3.org/TR/CSS2/visudet.html#inline-non-replaced’
The height of a line box is determined as follows:
1.The height of each inline-level box in the line box is calculated. For replaced elements, inline-block elements, and inline-table elements, this is the height of their margin box; for inline boxes, this is their 'line-height'. (See "Calculating heights and margins" and the height of inline boxes in"Leading and half-leading".)
2.The inline-level boxes are aligned vertically according to their 'vertical-align' property. In case they are aligned 'top' or 'bottom', they must be aligned so as to minimize the line box height. If such boxes are tall enough, there are multiple solutions and CSS 2.1 does not define the position of the line box's baseline (i.e., the position of the strut, see below).
3.The line box height is the distance between the uppermost box top and the lowermost box bottom. (This includes the strut, as explained under'line-height' below.)
我先跟你说原因吧，
p设置了line-height:20px;
但是p的实际高度是66px 多出来了6个像素就是因为a标签的高度被错误计算了
上面英文说了它的高度是由3点决定，上面第2点最关键，如果你想计算最小的高度，那么你必须给他设置vertical-align为top或者bottom，这个地方你设置子元素a标签vertical-align:top;也能得到
p标签设置font-size:12px的效果，我其实也不算太明白为什么设置p的font-size会得到那样的效果，推测，估计是设置font-size，会调整基线的位置吧
另外延伸出，我以前也遇到的一个问题，div高度不设置包住一个img元素
div里面包含一个img元素和你遇到的这个问题一样，div的高度我们会认为应该＝img自身高度，但是实际上大于img高度，就在于基线的问题，反正这个挺复杂的，记住如果要计算行内元素的最小高度，一定要设置他的vertical－align为top或者bottom
如果题主看了文章有什么比较好的发现，也可以告知下，互相学习
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
