行内元素能不能设置垂直padding和垂直border呢？该如何处理

行内元素能不能设置垂直padding和垂直border呢？？？
教材上写的是行内元素设置垂直padding和垂直border无效。
但是我试的时候是这些效果：

HTML code

<span style="background:red; border:5px solid blue; padding:100px;">aaa</span>

IE8、FF下：


IE6、IE7下：


IE8和FF应该更接w3c标准吧，但是IE6和IE7却和书上说的效果一样~

问题：
1、到底行内元素能不能设置垂直padding和border呢？
2、这个不兼容的问题该怎么解决呢？

谢谢！

[解决办法]

HTML code

1<br/>1<br/>1<br/>1<br/>1<br/><span style="background:red; border:5px solid blue; padding:50px;">aaa</span>1<br/>1<br/>1<br/>1<br/>1<br/>
[解决办法]
探讨

教材上写的是行内元素设置垂直padding和垂直border无效。
但是我试的时候是这些效果：
HTML code

<span style="background:red; border:5px solid blue; padding:100px;">aaa</span>



IE8、FF下：


IE6、IE7下：


IE8和FF应该更接w3c标准吧，但是IE6和IE……

[解决办法]
行内元素：
  设置宽度无效；
  设置高度无效，只能通过line-height来设置；
  margin和padding 只有左右其效果，上下无效果；
如果想实现兼容性的效果：
  1）将行内元素转换成内联块，即：display:inline-block;然后设置内外间距；
  2）通过行高，至于文字的排版可以用text-align或者vertical-align属性来设置； 

 

查看更多 下一篇