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

    css怎么去掉div间距

    藏色散人藏色散人2021-01-21 15:49:30原创756

    css去掉div间距的方法:1、通过margin和padding属性去除div内部间距和外部间距;2、设置父级元素“font-size”为0,然后重新设置div的“font-size”即可正常去除div之间的间距。

    本教程操作环境:Windows7系统、HTML5&&CSS3版本,DELL G3电脑,该方法适用于所有品牌电脑。

    推荐:《css视频教程

    css去掉div间距

    1、去除div内部间距和外部间距

    div{
        margin: 0;
        padding: 0;
    }

    2、去除div之间的间距

    默认情况下,div之间是没有间距的,如果设置了display: inline-block,则会出现间距。

    <!DOCTYPE html>
    <html >
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            div{
                display: inline-block;
                border: 1px solid #000;
            }
        </style>
    </head>
    <body>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </body>
    </html>

    效果:

    aca3ed1c306a256b95874d8f104da81.png

    原因,写代码时,换行缩进造成的出现空格。

    解决方法:

    设置父级元素font-size为0,再重新设置div的font-size即可

    body{
        font-size: 0;
    }
    div{
        font-size: 16px;
    }

    952f6f019699a8adb4c5e7ce8f9c1fc.png

    以上就是css怎么去掉div间距的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css
    上一篇:Scss与Sass是什么 下一篇:css怎么将文字底对齐
    大前端线上培训班

    相关文章推荐

    • css怎么让背景图片不重复• css怎么让图案上下浮动• jsp页面如何加入css样式• react怎么添加css样式• css浮动带来什么问题

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网