行内元素能不能设置垂直padding和垂直border呢？_html/css

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

php中文网

发布： 2016-06-24 12:09:11

原创

1520人浏览过

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

<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、这个不兼容的问题该怎么解决呢？

谢谢！

回复讨论(解决方案)

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/>

登录后复制

看看这个效果

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……
设置垂直的是指上下，上面的和下面的设置起来是没有效果的

<p>fsfsfsfs</p><p style="border:5px solid #900; padding:100px; background:#00F;"></p><p>fsfsfsd</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1521">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680092127151.png" alt="硅基智能">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1521">硅基智能</a>
                            <p>基于Web3.0的元宇宙，去中心化的互联网，高质量、沉浸式元宇宙直播平台，用数字化重新定义直播</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="硅基智能">
                                <span>62</span>
                            </div>
                        </div>
                        <a href="/ai/1521" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="硅基智能">
                        </a>
                    </div>

登录后复制

第一：行内元素与宽度
宽度不起作用
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……

<p style="background:yellow;">fsfsfsfs</p><span style="border:5px solid #900; padding:100px; background:#00F;"></span><p style="background:yellow;">fsfsfsd</p>

登录后复制

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

引用 5 楼 athrunzero 的回复:

引用 4 楼 wangyao1135 的回复:

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

这里说不影响应该指的是布局，虽然是把字盖上了，但是布局没变，你如果把颜色去掉。布局没有变化

引用 5 楼 athrunzero 的回复:

引用 4 楼 wangyao1135 的回复:

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

如果是一段文字，你在里面加上一个span标签然后设置他的padding他对上下的布局是没有变化的，我测试过了。。。

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

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

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

还是谢谢大家！：）