如何单纯设置水平/垂直外边距margin或者内边距padding的值

原创已于 2022-07-22 20:06:45 修改 · 677 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#sass #css #前端

于 2022-05-18 01:01:40 首次发布

CSS 入门法则专栏收录该内容

14 篇文章

订阅专栏

本文介绍了四种方法来设置CSS中元素的水平外边距，包括分开设置、强行设置、使用`margin-inline`和利用SASS的变量及mixin。其中，`margin-inline`和SASS的mixin提供了更简洁的代码和更好的可维护性。对于需要考虑兼容性的场景，分开设置是最佳选择。而对于想要提高代码复用性和减少魔术数字的开发者，SASS的mixin是推荐的解决方案。

文章目录

如题，我们需要一次性水平设置 margin的值，目前的话有什么解决方案呢？

下文例子用设置margin的水平方向做例子，但水平方向或者padding设置也是同理 😀

方法一：分开设置

很遗憾，单纯使用margin没办法做到只设置水平方向的外边距，分开设置这种方法让人沮丧，没办法做到一次性设置：

margin-left: 100px;
margin-right: 100px;

但这样的方法兼容性却是最好的，如果你需要考虑兼容，嗦它就对了！

推荐指数：🌟🌟🌟🌟

方法二：强行设置

如果要强行用margin设置的话，也并非不可以：

margin: 0 100px;

这种方式副作用是影响到垂直方向（知道💩山项目代码里为什么会那么多有奇奇怪怪的bug了吧，全靠厚积薄发啊）

推荐指数： 🌟

方法三：`margin-inline`

激动人心的属性，margin-inline直接设置水平方向的外边距：

margin-inline: 100px;

如果我需要设置垂直方向的呢？

当当当~，恭喜你，获得margin-block属性 🙋

margin-block: 100px;

是不是从来没有见过这个新属性？

没错，这是新属性来着，如果你是IE大户，请别留步~

关于margin-inline, margin-block, padding-inline, padding-block属性，可以参考往期文章：：必知必会margin-inline, margin-block, padding-inline, padding-block

如果你不接受参考，那直接用就完事。

推荐指数：🌟🌟🌟🌟

结合SASS的方法四：变量

SASS很简单，花一两个小时+实操就学会了，没学过的小伙伴抓紧卷起来！

SASS教程：https://sass-lang.com/guide

一想到SASS，当然是用的变量来解决问题啦，阿sir~

SASS：

.element {
    $horizontalMargin: 100px;
    padding-left: $horizontalMargin;
    padding-right: $horizontalMargin;
}

我们得到的CSS：

.element {
  padding-left: 100px;
  padding-right: 100px;
}

这种方式使用变量来避免了魔术数字（magic number），我们需要改动的话只需要改动一处地方即可。

推荐指数：🌟🌟🌟

结合SASS的方法四：`mixin`

为什么使用变量的方法推荐指数才三颗星呢？

因为我们还有更好的方案——mixin

我们知道可以将@mixin中的CSS声明规则@include到我要的CSS样式中。

但在我看来，mixin本质是一个函数，它可以传参（当然你也可以不传），返回值是括号体内的所有CSS声明规则。

了解了它的本质，那我们就知道了它的优势，我不需要每次都定义一个变量来去设置水平方向margin的值。

SASS：

@mixin horizontal-margin($len) {
    margin-left: $len;
    margin-right: $len;
}

.element {
    @include horizontal-margin(100px);
}

我们得到的CSS：

.element {
  padding-left: 100px;
  padding-right: 100px;
}

我们甚至可以将@mixin horizontal-margin放在全局文件里面，普度众生
请添加图片描述
推荐指数：🌟🌟🌟🌟🌟

以上就是所有方式了，希望能够帮助到你~

我是 Pandy，一个喜欢英语的程序猿 👨‍💻

关注公众号 Yopth，回复「加群」，加入「英文技术翻译互助群」，我们加入一起充电英语 🔌