如何实现不固定宽度 div 的两侧固定间距？

如何在不固定宽度的 div 上实现两侧固定间距（1rem）？

在网页设计中，居左或居右对齐元素非常常见。对于固定宽度的元素，使用 padding 或 margin 即可轻易实现。但当元素宽度不固定时，如何设置两侧边距呢？

解决方案：

可以使用 margin-left 和 margin-right 属性。具体代码如下：

div {
  margin-left: 1rem;
  margin-right: 1rem;
  background-color: blue;
}

想象一下这个 div 像一块画布，这两条边距就像两块磁铁，将画布的左右两端固定在屏幕上的特定位置，确保两侧都留有 1rem 的空间。

这种方法的好处在于，无论元素的宽度如何变化，边距始终保持 1rem。与使用百分比表示不同的屏幕尺寸造成差异相比，这种方式更为可靠。

以上就是如何实现不固定宽度 div 的两侧固定间距？的详细内容，更多请关注其它相关文章！