为什么图片栏的td内容的height高度不受控制呢
来源：3-2 项目作业
键盘f11
2020-05-12 13:50:42
老师，您好，我想咨询一下，为什么右侧的table表单里面，其中宝贝信息这一行的内容height高度是可控的是54px；但是下面几行的内容由于添加了图片内容，行高度设置不了54px，我已经将图片的高度设置为54px，但是实际用F12查询的时候，是60px，这个是因为什么原因呢？
<!DOCTYPE html>
<html>
<head>
<title>zuoye</title>
<link rel="stylesheet" type="text/css" href="css/zuoye.css">
</head>
<body>
<header class="head1">
<img src="img/logo.png">
</header>
<nav></nav>
<section>
<table class="zuo1">
<tr>
<td class="zuo">
<p>商品管理</p>
<p>评价管理</p>
<p>咨询管理</p><br/><br/>
<p>全部订单</p>
<p>已完成订单</p>
<p>待处理订单</p>
<p>今日物流</p>
<p>月考核</p>
<p>季度考核</p>
<p>年度考核</p>
</td><!--左侧的td内容-->
<td class="you2">
<table class="you1">
<tr>
<td>全部订单</td>
</tr>
</table><!--第一个table-->
<table class="you4" border="6">
<tr>
<td>查询：</td>
</tr>
</table><!--第二个table-->
<table class="zuo2" border="2" align="center"><!--第三个table-->
<tr class="you7"><!--第三个table第1行内容-->
<td colspan="2">宝贝信息</td>
<td>订单数量</td>
<td>单价</td>
<td>买家</td>
<td>下单时间</td>
<td>实付款</td>
<td>订单操控</td>
</tr>
<tr><!--第三个table第2行内容-->
<td><img src="img/txue.png"></td>
<td>2019新款个性男女潮牌imooc暮春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-21 21:54</td>
<td>240</td>
<td>代付款</td>
</tr>
<tr><!--第三个table第3行内容-->
<td><img src="img/xie.jpg"></td>
<td>2019新款个性男女潮牌imooc暮春之行运动鞋</td>
<td>2</td>
<td>120</td>
<td>小李子</td>
<td>2019-2-21 19:04</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr><!--第三个table第4行内容-->
<td><img src="img/txue.png"></td>
<td>2019新款个性男女潮牌imooc暮春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-21 21:54</td>
<td>240</td>
<td>代付款</td>
</tr>
<tr><!--第三个table第5行内容-->
<td><img src="img/xie.jpg"></td>
<td>2019新款个性男女潮牌imooc暮春之行运动鞋</td>
<td>2</td>
<td>120</td>
<td>小李子</td>
<td>2019-2-21 19:04</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr><!--第三个table第6行内容-->
<td><img src="img/txue.png"></td>
<td>2019新款个性男女潮牌imooc暮春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-21 21:54</td>
<td>240</td>
<td>代付款</td>
</tr>
<tr><!--第三个table第7行内容-->
<td><img src="img/xie.jpg"></td>
<td>2019新款个性男女潮牌imooc暮春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-21 21:54</td>
<td>240</td>
<td>代付款</td>
</tr>
<tr><!--第三个table第8行内容-->
<td><img src="img/txue.png"></td>
<td>2019新款个性男女潮牌imooc暮春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-21 21:54</td>
<td>240</td>
<td>代付款</td>
</tr>
<tr><!--第三个table第9行内容-->
<td><img src="img/xie.jpg"></td>
<td>2019新款个性男女潮牌imooc暮春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-21 21:54</td>
<td>240</td>
<td>代付款</td>
</tr>
<tr><!--第三个table第10行内容-->
<td><img src="img/txue.png"></td>
<td>2019新款个性男女潮牌imooc暮春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-21 21:54</td>
<td>240</td>
<td>代付款</td>
</tr>
<tr><!--第三个table第11行内容-->
<td><img src="img/xie.jpg"></td>
<td>2019新款个性男女潮牌imooc暮春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-21 21:54</td>
<td>240</td>
<td>代付款</td>
</tr>
<tr><!--第三个table第12行内容-->
<td><img src="img/txue.png"></td>
<td>2019新款个性男女潮牌imooc暮春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-21 21:54</td>
<td>240</td>
<td>代付款</td>
</tr>
<tr><!--第三个table第13行内容-->
<td><img src="img/txue.png"></td>
<td>2019新款个性男女潮牌imooc暮春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-21 21:54</td>
<td>240</td>
<td>代付款</td>
</tr>
</table><!--第三个table-->
</td><!--右侧的td内容-->
</tr>
</table>
</section>
<footer>
</footer>
</body>
</html>
*{
margin: 0px;
padding: 0px;
}
.head1{
width: 100%;
background-color: #169bd5;
height: 60px;
}
.head1 img{
padding-top: 10px;
}
.zuo1{
width: 100%;
border: 2px gray solid;
}
.zuo1 .zuo{
width: 12%;
border: 2px gray solid;
}
.zuo1 .you1{
border: 2px gray solid;
width: 100%;
height: 50px;
}
.zuo1 .you4{
border: 2px gray solid;
width: 100%;
height: 50px;
}
.zuo1 .zuo2 img{
height: 54px;
}
.zuo1 .zuo2{
text-align: center;
}
.zuo1 .you2{
width: 88%;
}
.zuo1 .zuo2{
border: 2px blue solid;
width: 100%;
}
.zuo1 .you7{
border: 2px orange solid;
}
.zuo1 .zuo2 tr{
height: 54px;
}
上述为我写的代码，另外有一点想咨询一下老师，<table class="">table中可以定义一个class属性，同样的在tr和td中是否可以添加class类呢？ <tr class=""> <td class=""> 上述是否是可行的？
1回答
-
同学你好，关于同学的疑问，解答如下：
1、img标签自带间隙。虽说给img设置高度为54px，但是img标签自带间隙，因此通过检查元素，td的高度要比54px大的多。解决方案，把img标签设置为块元素。代码参考：
2、tr和td标签也是可以添加类名的。
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0
相似问题