当我最小化页面时 div 扩展以匹配边距属性

Question

所以，我无法弄清楚我在这里做错了什么。当我将页面缩小到 25% 时，div 正在扩展以匹配 CSS 代码的边距属性。

我想让它更像这个方形的内容（如果你明白我的意思的话）： goal

这是 css 文件中的一个片段：

.post{
    border-radius: 25px;
    margin: 250;
    margin-top: 10;
    margin-bottom: 10;
    background-color: rgba(188, 64, 119, 0.4);
    text-align: left;
    padding-bottom: 40;
}

html

<div class="post">
            <img id="cat" src="Imgs/cat.png" alt="cat-logo"/>
            <!-- text -->
</div>

我是新手，所以...请耐心等待。

Answer 1

尝试将此添加到您的规则中：

max-width: 970px;
margin: 10px auto;

如果您定义 max-width 容器不能超过这个值。所以现在你必须让你的容器居中 margin auto 在左边和右边。

Answer 2

您在 .post 上使用无单位 margin s - 这是不好的做法。使用某种相对单位，例如 %。如果将 .post { margin: 25; } 更改为 .post { margin: 25%; }，当您缩放 in/out.

时边距不会表现得很奇怪

当我最小化页面时 div 扩展以匹配边距 属性

When I minimize the page div extends to match margin property

html

css

margin

当我最小化页面时 div 扩展以匹配边距属性