zaxlctjs 2015-07-13 03:56 采纳率: 81%
浏览 4389
已采纳

div里图片和文字同时存在的布局问题,谢谢了

<html>
<head>
<style>
.nav{width:120px; height:30px; font-size:18px; line-height:30px; background:red;}
</style>
</head>

<body>
<div class="nav">
<img src="top.png" width="20" height="20"/>
<span>加油</span>
</div>
</body>
</html>

这段代码是没有问题的,文字在盒子里水平是居中的,但是在style里加了这个样式后
img{margin-top:10px;}
图片是往下挪了,为什么文字也跟着往下挪了,不解,求教,谢谢啦

  • 写回答

4条回答 默认 最新

  • tutu__ 2015-07-13 04:04
    关注

    因为img和span都是行内元素,外边距是影响整块内容的。
    如果只想移动img,可以给img加上如下样式:
    img{ position: relative; top: 10px;}
    就可以了。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

悬赏问题

  • ¥15 ghpython这里总是报错而且rhino视图窗口内不显示怎么办
  • ¥15 布尔运算推导,请证明
  • ¥15 有没有人会打学生成绩管理系统呀
  • ¥15 在使用Fiddler和夜神模拟器抓包的时候一直出现443该怎么办啊QAQ搜了好几个笔记都没有解决
  • ¥15 3x7的二维数组A、B、C,A中的任意1个数组元素与B的任意1个数组元素、同时又与C的任意1个数组元素比较,把不同位置出现相同数的比较称为无意义,反之称为有意义,把有意义的比较打印输出。
  • ¥20 预测模型怎么处理原始数据(随机森林)
  • ¥20 请问discuz3.5如何实现插入ckplayer全能播放器功能呢?
  • ¥15 thingsboard代码编译出错误
  • ¥15 博途v18仿真报错怎么解决
  • ¥15 欧姆龙plc枕式包装机 ST编程