所有边距都相等，但有些边距比其他边距更平等

Posted 2023-03-29

【中文标题】所有边距都相等，但有些边距比其他边距更平等

【英文标题】：All margins are equal, but some margins are more equal than others

【发布时间】：2019-02-08 03:44:16

【问题描述】：

div 
    width: 100px;
    margin: 0 auto;

此 CSS 将块元素水平居中。

是否可以抵消auto 边距的比例？例如，让左边距是右边距的两倍？

【问题讨论】：

如果我们使用诸如 margin:0 50% 0 25% 之类的百分比；像这样？

【参考方案1】：

您可以使用一些空的 div 并以两倍的速度“弯曲”左侧：

body 
  display: flex;


#left 
  flex: 2


#content 
  width:100px;
  background-color: pink;


#right 
  flex: 1

<div id="left"></div>
<div id="content">content</div>
<div id="right"></div>

【讨论】：

你可以使用::before和::after来代替空的div。