• 技术文章 >web前端 >css教程

    css怎样清除p标签自身间距

    青灯夜游青灯夜游2021-11-09 11:44:51原创1119

    在css中,可以通过给p标签设置“p {padding:0;margin: 0;-webkit-margin-before: 0;-webkit-margin-after: 0;}”样式来清除p标签自身的间距。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    在HTML中,各个标签都有默认样式,例如p标签自身就有间距:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <style>
    p {
    border: 1px solid red;
    }
    </style>
    </head>
    <body>
    <p>hello</p>
    <p>hello</p>
    </body>
    </html>

    1.png

    那么怎么去除p标签自身间距呢?

    我们可以使用margin和padding属性,将其值都设置为0即可:

    p {
    	padding:0;
    	margin: 0;
    }

    这样就可清除p标签自身间距:

    2.png

    但在有些浏览器中即使这样p有还有上下边距,因为

    3.png

    这里 -webkit-margin-after-webkit-margin-before都有1rem,所以最好还要给这两个都设为0

    -webkit-margin-before: 0;
    -webkit-margin-after: 0;

    (学习视频分享:css视频教程

    以上就是css怎样清除p标签自身间距的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css p标签 清除间距
    上一篇:12个值得收藏的 CSS 技巧!! 下一篇:如何在css中让文本居中显示
    php培训_php实战培训【立即报名】-php中文网第20期

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• 外部css样式表有什么用• 纯CSS创建各类进度条的 N 种方式(总结分享)• 10个值得收藏的CSS可视化工具(分享)• 12个值得收藏的 CSS 技巧!!• 4种css超链接伪类的作用是什么
    1/1

    PHP中文网