css3 中 margin-top使用的注意点

最新推荐文章于 2025-10-10 15:24:28 发布

原创最新推荐文章于 2025-10-10 15:24:28 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css3 #前端

html 专栏收录该内容

3 篇文章

订阅专栏

本文通过实例探讨了CSS中margin-top属性使用百分比值时的行为表现。实验对比了固定像素值与百分比值的不同效果，并解释了为什么margin-top的百分比是基于父元素的宽度而非高度进行计算。

最近在写一个前端页面的时候使用了margin-top属性,并且给它赋了一个百分比的属性值,结果页面的出了一点问题.

下面做个实验:

这个是html代码

    <div class="out1">
        <div class="inner1">
            margin: 50px 100px;
        </div>
    </div>
    <div class="out2">
        <div class="inner2">
            margin: 25% 25%;
        </div>
    </div>

这个是css代码

    .out1, .out2{
        border: 1px solid #000;
        background-color: #ccc;
        width: 400px;
        height: 200px;
    }
    .inner1, .inner2{
        width: :200px;
        height: 100px;
        background-color: #e2e3e4;
    }
    .inner1{
        margin: 50px 100px;
    }
    .inner2{
        margin: 25% 25%;
    }