margin-right不适用于我的HTML。我如何集中我的内容？

Question

最近，我正在学习自适应设计。但是当屏幕变大时，我在内容方面遇到了一些麻烦。

问题在于：

@media screen and (min-width: 950px) {
    body {
        margin: 10%;
    }
}

当我将保证金设置为10％时，只有margin-top和margin-left有效。这不是我想要的。 margin-right根本不起作用。

这是图片：

那么，我该如何解决这个问题？

Answer 1

这种情况正在发生，因为您没有正确设置身体的宽度。如果您指定了边距，那么您会看到margin-left正在工作，它会将您的内容推出屏幕右侧。

您需要将宽度和边距总和为100％，因此通过在两边提供10％的边距，您必须将宽度调整为80％。

@media screen and (min-width: 950px) {
    html {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    body{
        width: 80%;
        margin: 10%;
        padding: 0;
    }
}

此外，您不必总是调整计算。您也可以将它们设置为自动调整，如下所示：

body {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
}

Answer 2

要调整内容，您还可以使用CSS的position: relative;属性。

@media screen and (min-width: 950px) {
body {
 position: relative;
 top: 0%;
 bottom: 0%;
 right: 10%;
 left: 0%;
 }
}

您还可以提供像50px;

这样的像素值

Answer 3

我认为这是你的简短回答

 body{margin: 0;}
.wrapper{width: 80%; margin: 0 auto;}
.wrapper img{max-width: 100%}

<div class="wrapper">
  <img src="https://images3.alphacoders.com/278/27807.jpg" />
</div>

Answer 4

默认情况下，图像是内联级别元素。你需要使用display：block;如果你想让你的图像和边距正常工作。

img { display: block; }