返回信息流我想达到这样一个效果，左边是图片，右边是文字。想把文字和图片的中线对齐，
没用float：left，先图后文。图片是48px*48px，文字字体16px，两行之间用<br>
<img src=" " style="height:48px"><a href=" " style="font-size:16px " >text </a>
<br>
<img src=" " style="height:48px"><a href=" " style="font-size:16px " >text </a>
虽然能够实现，但是文字的底线和图片的底线是对齐的。在文字里无论是margin还是padding都不能在垂直方向改变文字的位置。
加入border 后发现，如果不加padding，border会紧贴文字上下边缘，如果加入padding，border的上下会离开文字，但文字的位置不变。
这是什么原因呢？
可以到这个网址验证：http://www.w3schools.com/css/tryit.asp?filename=trycss_float6
代码如下：
<img src="http://i.imgur.com/ar4ZH.png" style="border:1px dotted;height:48px"><a href=" " style="font-size:16px " >text </a>
<br>
<img src="http://i.imgur.com/ar4ZH.png" style="border:1px dotted;height:48px"><a href=" " style="font-size:16px; border: 1px dotted; margin: 100 0;padding:20 0" >text </a>
这是一条镜像帖。来源：北邮人论坛 / www-technology / #18061同步于 2012/11/8
该镜像源已超过 30 天没有更新，可能在源站已被删除。
WWWTechnology机器人发帖
html图文混排的疑惑
yym2
2012/11/8镜像同步14 回复
订阅后，新回复会通过你的通知中心匿名送达。
9 条回复
<img src="http://i.imgur.com/ar4ZH.png" style="float:left;height:48px">
<a href="#" style="line-height:48px;font-size:16px">text</a>
<br />
<img src="http://i.imgur.com/ar4ZH.png" style="float:left;height:48px">
<a href="#" style="line-height:48px;font-size:16px">text</a>
请教为什么一定要在图片上加上float：left呢?
【 在 binux 的大作中提到: 】
: <img src="http://i.imgur.com/ar4ZH.png" style="float:left;height:48px">
: <a href="#" style="line-height:48px;font-size:16px">text</a>
: <br />
: ...................
在没有使用float:left情况下，使用line-height依然无效。
【 在 buptcy 的大作中提到: 】
: 单行垂直居中，给文字行加一个line-height属性，值为图片高度，即48px
【 在 yym2 的大作中提到: 】
: 在没有使用float:left情况下，使用line-height依然无效。
内联元素没有height和line-height属性;
float属性：float 属性定义元素在哪个标的目标浮动。以往这个属性总应用于图像，使文本环绕在图像四周，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而非论它本身是何种元素。 或者给a元素加一个块级元素作为父元素，这样也可以把a变成块级元素
谢谢
【 在 buptcy 的大作中提到: 】
: 内联元素没有height和line-height属性;
: float属性：float 属性定义元素在哪个标的目标浮动。以往这个属性总应用于图像，使文本环绕在图像四周，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而非论它本身是何种元素。 或者给a元素加一个块级元素作为父元素，这样也可以把a变成块级元素
可是给<img>加上float，将其变为块元素后，为什么会影响到后面的内联元素<a>呢？此时<a>依然是内联元素啊？
根据2L回复，将<img>设置成浮动以后, 后面的<a>中设置line-height就有效。如果<img>中没有设置float,则<a>中line-height无效。
【 在 buptcy 的大作中提到: 】
: 内联元素没有height和line-height属性;
: float属性：float 属性定义元素在哪个标的目标浮动。以往这个属性总应用于图像，使文本环绕在图像四周，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而非论它本身是何种元素。 或者给a元素加一个块级元素作为父元素，这样也可以把a变成块级元素
我是因为http://hikejun.com/blog/2011/10/26/%E8%BF%91%E6%9C%9F%E9%9D%A2%E8%AF%95%E6%84%9F%E5%8F%97/ 这篇文章
而这个block formatting context，我也不知道是什么