前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >行内元素内外边距探究:为何span设置上下margin和padding不起效

行内元素内外边距探究:为何span设置上下margin和padding不起效

作者头像
德顺
发布2019-11-13 10:40:45
8K0
发布2019-11-13 10:40:45
举报
文章被收录于专栏:前端资源

一直以为行内元素设置内外边距会不起效,之前也没有具体的去实验,只是在需要设置 margin 或者 padding 的时候给元素设置一个 display: inline-block; 就得了。

今天正好有时间,就来实验了一把。原来 span 标签默认的不是只能设置左右边距,还有更有意思的现象。

我给 span 标签设置了 10px 的内边距和外边距,并设置了背景色,外面嵌套一个 p 标签。

span 的背景色可以看出,padding 是设置上了。只不过无法把 p 标签撑开罢了。 margin只能设置左右边距,上下边距不起效。

但是 padding-top 去哪了?怎么看不到呢?

我又给外部容器设置了一个外边距,这样上内边距就显示出来了。

原来 span 等行内元素是可以设置内边距 padding 的,只不过元素本身无法把父元素撑开,看上去就是设置的 padding 上下边距不起效了,而 margin 就只能设置 span 的左右边距。

所以,如果要给 span 设置边距,一般的方法就是给它设置一个 display: inline-block; ,把它变成行内块级元素就可以了。

贴一下代码:

HTML:

代码语言:javascript
复制
<div class="container">
    <p>
        <span>我想要边距</span>
        <span>我想要边距</span>
    </p>
    <p>我是一个P</p>
</div>

CSS:

代码语言:javascript
复制
<style>
    * {
        padding: 0;
        margin: 0;
    }

    .container {
        width: 600px;
        margin: 20px auto;
        text-align: center;
    }

    p {
        border: 2px solid #0f9deb;
    }

    span {
        padding: 10px;
        margin: 10px;
        background: #F0DE7D;
        line-height: 20px;
    }
</style>

声明:本文由w3h5原创,转载请注明出处:《行内元素内外边距探究:为何span设置上下margin和padding不起效》 https://cloud.tencent.com/developer/article/1537965

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 贴一下代码:
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档