问答博客资讯标签用户活动
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

css 内外边距问题?

头像
_XYZ111
    492246169

    我原先的代码是这样的

    <!DOCTYPE html>
<html>

    <head>
        <title>Demo</title>
        <!-- bootstrap4 模板引入 -->
        <script src="http://localhost:8000/templates/templates.js" templates="bootstrap"></script>
    </head>

    <body>
        <div class="bg-primary">
            <div class="mb-5 bg-success text-white">123</div>
        </div>
    </body>

</html>

    我以为给里面这个 div 设置了 margin-bottom, 会撑开外面的 div

    下图是我认为的效果
    image.png

    但是实际的效果却是这样的
    image.png
    image.png

    这就很奇怪了, 为什么外边距给的是里面的 div, 却是撑开外面的内容?
    如果我就是想要里面 div 设置 margin, 可以撑开外面 div 的 padding 应该怎么写?
    想要达到这样的效果

    image.png

    css
    阅读 2.2k
    4 个回答
    得票最新
    头像头饰
    陟上晴明
      21.2k124691

      你给父容器添加 padding 或者 border。
      也可以给父容器添加 overflow:hidden 来解决。

      主要是 margin值的折叠与合并 问题，想要了解具体机制可以自行检索一下。。

      头像头饰
      limingcan
        482127

        给你的父元素增加一个overflow: hidden;的属性就好了

        头像
        fine
          16630

          去看下 bfc, 以及边距塌陷

          头像
          _XYZ111
            492246169

            index.html

            <body>
    <div id="parent" class="bg-primary">
        <div id="child" class="mb-5 bg-success text-white">123</div>
    </div>
    <div>End</div>
</body>

            在默认情况下, 块级容器内容是被高度填充的
            同理, 上述代码中, 填充 parent 高度的, 并不是 child 的 margin, 而是 child 的高度值, 而撑开内容高度的, 就是 123 这个文本. 所以, 会看到如下的效果图

            image.png

            边距跑到容器外面了, 那么首要的解决方式, 就是给父容器设置 overflow 属性
            overflow 元素的默认值是 visible, 即内容溢出会呈现在元素框之外
            那么, 只需要将属性值定义成不是 visible 的其中任意一种属性即可, 如下

            index.css

            #parent {
    overflow: auto;
}

            image.png

            除此之外, 还可以给子元素设置 display: inline-block; 来解决这个问题, 如下

            #child {
    display: inline-block;
}

            这个和行块级元素的特性有关
            我的理解是: 行级块元素容器被撑开的高度同时包含了子元素的外边距和高度
            这样也就弥补了块元素的不足

            image.png

            另外, 还有其他的解决办法, 如定位, 浮动等...
            或者给外部 div 一点内边距也能解决这个问题

            #parent {
    float: left;
    /* position: relative; */
    /* display: flow-root; */
}

            还有楼上有提到的, 将BFC作为父容器的定义

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