外边距叠加问题

最新推荐文章于 2024-05-19 11:27:40 发布

什么时候能发一篇论文啊

最新推荐文章于 2024-05-19 11:27:40 发布

阅读量209

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/bboyzz/article/details/105149525

版权

  <style type="text/css">
            .outer{
                background-color: #1E9FFF;
                margin: 100px;
            }
            .inner{
                background-color: #FFFF00;
                margin: 50px;
                height: 50px;
            }
   </style>
   
    <body>
        <div class="outer">
            <div class="inner"></div>
        </div>
    </body>

在这里插入图片描述

显示出来的 蓝色样式 和 黄色样式 的 外边距重叠

解决方法：
1、给蓝色区域添加边框,就可以解决。

        <style type="text/css">
            .outer{
                background-color: #1E9FFF;
                margin: 100px;
                border: 1px solid #1E9FFF;
            }
        </style>

在这里插入图片描述

2、使用overflow:hidden也可以解决。

<style>
.outer{
                background-color: #1E9FFF;
                margin: 100px;
                overflow:hidden;
            }
</style>

(这里就不放图片了，和第一种解决方案一样)

3、给父元素和子元素增加宽度，子元素设置为内联块。

<style type="text/css">
           	.outer{
                background-color: #1E9FFF;
                margin: 100px;
                width: 1000px;
            }
            .inner{
                background-color: #FFFF00;
                margin: 50px;
                height: 50px;
                width: 900px;
                display: inline-block;
            }
</style>

（后续待添加……）

什么时候能发一篇论文啊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
外边距叠加问题

<style type="text/css"> .outer{ background-color: #1E9FFF; margin: 100px; } .inner{ background-color: #FFFF0...
复制链接

扫一扫