Skip to content

[css] 第56天 margin和padding使用的场景有哪些? #220

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

第56天 margin和padding使用的场景有哪些?

Activity

encountermm

encountermm commented on Jul 3, 2019

@encountermm

margin:

     需要在border外侧添加空白时;

     空白处不需要背景(色)时;

    上下相连的两个盒子之间的空白,需要相互抵消时。

padding:

    需要在border内测添加空白时;

    空白处需要背景(色)时;

    上下相连的两个盒子之间的空白,希望等于两者之和时。

LeiDeMing

LeiDeMing commented on Nov 7, 2019

@LeiDeMing

实现自适应的等比例矩形效果:
div { padding: 50%; }
div { padding: 25% 50%; } //宽高比为 2:1 的矩形效果

实现头图高度天然等比例缩小效果
.box {
padding: 10% 50%;
position: relative;
}
.box > img {
position: absolute;
width: 100%; height: 100%;
left: 0; top: 0;
}

padding 属性和 background-clip 属性配合,可以在有限的标签下实现一些 CSS 图形绘制效果

margin 可以实现很多流体布局
margin 外部尺寸实现等高布局
实现垂直居中布局

from《css世界》

smile-2008

smile-2008 commented on Dec 1, 2020

@smile-2008

margin:

     需要在border外侧添加空白时;

     空白处不需要背景(色)时;

    上下相连的两个盒子之间的空白,需要相互抵消时。

padding:

    需要在border内测添加空白时;

    空白处需要背景(色)时;

    上下相连的两个盒子之间的空白,希望等于两者之和时。

zxcdsaqwe123

zxcdsaqwe123 commented on Nov 14, 2021

@zxcdsaqwe123

margin用于给元素定位,padding用于改变元素的大小(除非使用了box-sizing:border-box)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @smile-2008@haizhilin2013@LeiDeMing@encountermm@zxcdsaqwe123

        Issue actions

          [css] 第56天 margin和padding使用的场景有哪些? · Issue #220 · haizlin/fe-interview