开发者社区> 问答> 正文

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

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

<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元素貌似没有被撑开
screenshot

展开
收起
a123456678 2016-05-26 17:22:45 2060 0
1 条回答
写回答
取消 提交回答
  • <!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>
    2019-07-17 19:16:37
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载