当前位置:Gxlcms > html代码 > 行内元素能不能设置垂直padding和垂直border呢?_html/css_WEB-ITnose

行内元素能不能设置垂直padding和垂直border呢?_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:28人阅读

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


IE8、FF下:


IE6、IE7下:


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

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

谢谢!


回复讨论(解决方案)

1
1
1
1
1
aaa1
1
1
1
1

看看这个效果

HTML code

1
1
1
1
1

aaa
1
1
1
1
1



看看这个效果
没太看明白~为什么上面padding的区域覆盖住了1,而下面的没覆盖住呢?

padding 的间距改成 Margin 试试看 什么效果

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

aaa



IE8、FF下:


IE6、IE7下:


IE8和FF应该更接w3c标准吧,但是IE6和IE……
设置垂直的是指上下,上面的和下面的设置起来是没有效果的

fsfsfsfs

fsfsfsd


第一:行内元素与宽度
宽度不起作用
span {
width:200px;
}没有变化

第二:行内元素与高度
高度不起作用
span{
height:200px;
}
没用变化

第三:行内元素与padding,margin
span{
padding:200px;
}
影响左右,不影响上下

引用楼主 wsy87217 的回复:
教材上写的是行内元素设置垂直padding和垂直border无效。
但是我试的时候是这些效果:
HTML code

aaa



IE8、FF下:


IE6、IE7下:


I……
正解

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

aaa



IE8、FF下:


IE6、IE7下:


IE8和FF应该更接w3c标准吧,但是IE6和IE……
http://www.360doc.com/content/11/0329/20/5723046_105698266.shtml
LZ参考一下这个吧。。。。

引用楼主 wsy87217 的回复:
教材上写的是行内元素设置垂直padding和垂直border无效。
但是我试的时候是这些效果:
HTML code

aaa



IE8、FF下:


IE6、IE7下:


I……
你这个例子中,padding垂直方向上,不也影响其它元素了吗?

引用 4 楼 wangyao1135 的回复:

引用楼主 wsy87217 的回复:
教材上写的是行内元素设置垂直padding和垂直border无效。
但是我试的时候是这些效果:
HTML code

aaa



IE8……

fsfsfsfs

fsfsfsd




只显示了第2个p元素的text内容,第1个p元素的text内容被遮挡住了,这不就是影响上下行了吗?

引用 5 楼 athrunzero 的回复:

引用 4 楼 wangyao1135 的回复:

引用楼主 wsy87217 的回复:
教材上写的是行内元素设置垂直padding和垂直border无效。
但是我试的时候是这些效果:
HTML code

引用 5 楼 athrunzero 的回复:

引用 4 楼 wangyao1135 的回复:

引用楼主 wsy87217 的回复:
教材上写的是行内元素设置垂直padding和垂直border无效。
但是我试的时候是这些效果:
HTML code

如果你想设置行内元素的宽和高可以让他们成为块级元素,css里写上display:block;就可以了

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

大家都误解我意思了,因为css标准是padding设置行内元素垂直方向无效,但我测试的时候发现还是都少有些影响的--在给行内元素同时设置高和padding时,背景色会覆盖上面元素的内容,但把背景色消除就不影响了。

还是谢谢大家!:)

人气教程排行