为什么“ margin：0 auto”会删除div中的空白？如何将div的空白居中？

问题描述

我已经在这个问题上坐了很长时间了，不知道该怎么办。

这是我对Stack Overflow的第一个问题，请谨慎，大声笑。

我想做一些非常基本的事情-只是将div居中（标有红色边框），使其与标头div（也标有红色边框）位于同一位置，请参见以下屏幕截图：

https://i.stack.imgur.com/TvPOF.jpg

如果我给div留出“ 0自动”的余量，它将删除div右侧的空白，为什么这样做呢？结果如下：

https://i.imgur.com/5lOc4Oq.png

我应该如何使div居中，我是从错误的角度来解决问题？

以下是相关代码：

HTML：

<div>

CSS：

<div class="header-bg">
    <div class="width">
        <div class="width2">
            <p class="header-title"><span class="gold-text">CAN’T HURT ME:</span> MASTER YOUR MIND AND DEFY THE ODDS</p>
            <p class="header-text">Can’t Hurt Me: Master Your Mind and Defy the Odds chronicles David Goggins’ incredible life from perpetual victim to active duty Navy SEAL to world class ultra athlete and world record holder. <a href="http://geni.us/canthurtme" target="_blank">Now available at these fine retailers</a>.<p>
        </div>
                
        <div class="buttons width2">
            <div class="button-1">
                <p>Buy the Book</p>
            </div>
            <div class="button-2">
                <p>About David</p>
        </div>
    </div>
</div>

解决方法

您要应用margin: 0 auto的什么元素？

我认为您在这些div上的max-width是引起您问题的原因。添加min-width或直接设置width-MAX-WIDTH表示它可以在0像素到1000像素（例如）之间变化，具体取决于屏幕尺寸...因此，如果您的屏幕只有400像素宽，宽度为400px。如果您的屏幕为1200像素，则div会锁定为1000像素-基本上是在应用边距时；边距缩小了您的框，从而消除了空白（因为它没有违反max-width规则，因为没有设置min-width规则）。

TLDR；将这些div上的max-width更改为width，您可能会发现它会比您追求的更好。