如何让div左右边距固定为1rem，同时宽度自适应内容？

要让一个 div 元素的左右边距固定为 1rem，同时宽度自适应内容，可以使用以下 CSS 样式：

div {
    margin-left: 1rem;
    margin-right: 1rem;
    display: inline-block;
    /* 或者使用以下方式 */
    /* display: inline-flex; */
    /* display: inline-grid; */
}

解释：

1. margin-left: 1rem; 和 margin-right: 1rem;：这两个属性分别设置 div 的左右边距为 1rem。
2. display: inline-block;：这个属性使得 div 的宽度自适应内容，而不是占据整个父容器的宽度。inline-block 元素会像行内元素一样排列，但可以设置宽度、高度、边距等属性。

其他选项：

• display: inline-flex;：如果你需要在 div 内部使用 Flexbox 布局，可以使用这个属性。
• display: inline-grid;：如果你需要在 div 内部使用 Grid 布局，可以使用这个属性。

示例：

<div>这是一个自适应宽度的div</div>

div {
    margin-left: 1rem;
    margin-right: 1rem;
    display: inline-block;
    background-color: lightblue;
    padding: 10px;
}

在这个示例中，div 的宽度会根据内容自适应，并且左右边距固定为 1rem。

注意事项：

• 如果你希望 div 在父容器中居中，可以使用 text-align: center; 在父容器上设置。
• 如果内容过长，div 的宽度可能会超出父容器的宽度，这时可以考虑使用 max-width 来限制最大宽度。