问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

对行内非替换元素应用上下外边距后会撑开该元素吗？

头像
tianjian
    373125266

    有个问题有点不解，请问对行内非替换元素应用上下内边距后会撑开该元素吗？为什么在不同浏览器下面会有如下的表现？
    代码：

    <style>
*{margin:0;padding:0}
img,span{padding:100px;border:1px solid blue;}
p{word-break:break-all;background-color:red;}
</style>
<body>
<p>
<span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaarrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrwerwerwrwerwerwwerwerwerwerwerwerwera</span>
</p>
</body>

    IE8：
    span元素貌似没有被撑开
    图片描述

    FF,CHROMOE:
    span元素明显被撑开了，而且整个元素好像被网上提了一样？
    图片描述
    图片描述

    css
    阅读 3.5k
    1 个回答
    得票最新
    头像
    _我已经从中二毕业了
      7.9k82131

      对于行内非替换元素来说，设置左右的内边距的话，左右的空白是可见的，上下的边距的空白是不可见的。

      但是，对于有背景色和内边距的行内非替换元素，背景可以向元素上面和下面延升。

      效果图：
      clipboard.png

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        body{padding: 50px;}
        p{width: 300px;}
        span{padding-top: 10px;padding-right: 10px;padding-bottom: 10px;padding-left: 10px;background-color: #ccc;}
    </style>
</head>
<body>
    <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈<span>呵呵呵</span>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
</body>
</html>

      由于内边距确实能够延伸背景，所以背景图是可以看到的！它与前面的行重叠了！

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题