如何在不移动元素的情况下为 div 提供边距？答案

【问题标题】：How to give margin to a div without moving elements?如何在不移动元素的情况下为 div 提供边距？
【发布时间】：2021-09-05 02:31:29
【问题描述】：

我想将我的标题内容文本移动到中心而不移动标题 img / 其余元素。在下一张图片中，您可以在顶部在我的导航后面看到我的 .portada-text 和 .portada botones。我在我想要的 div 元素所在的地方画了白色的框。我尝试在父 div (#portada) 或每个 div 子 (.portada-text 和 .portada-botones) 中使用 padding 和/或 margin 来移动它们，但它会移动图像或将屏幕扩展到底部，我只想移动那些 div 而不移动其余元素...

我的 HTML

<section class="portada" id="portada">
    <div class="portada-texto">
        <h1>Hola, soy Diego Donoso</h1>
        <h2>Técnico Analista Programador</h2>
    </div>
    <div class="portada-botones">
        <button>Leer más</button>
        <button>Contáctame</button>
    </div>
</section>

我的 CSS

#portada{
    min-height: 100vh; /*usará todo el tamaño del largo dependiendo de la pantalla*/
    background-image: url(../images/banner1.webp); /*imagen de fondo*/
    background-size: cover; /*la imagen se expande a la pantalla*/
    background-color: rgb(30, 30, 30); /*color de imagen*/
    background-blend-mode: soft-light; /*tono de color de portada*/
    text-align: center;
}

#portada .portada-texto {
   display: flex;
   justify-content: center;
   flex-direction: column;
}

#portada .portada-texto h1,h2{
   color: white;
   font-size: 2em;
}

#portada .portada-botones button{
   color: white;
   background: #ff9800;
   width: auto;
   height: auto;
   font-size: 1.625em; /*26px*/
}

【问题讨论】：

标签： html css

【解决方案1】：

查看此参考以了解不同的定位方案： Mozilla: position - CSS

默认情况下，所有元素都是静态的，如果您更改它们的边距/填充，您将固有地增加整个元素的宽度和高度。您也可以更改 left 和 right 属性，但如果元素是静态的，则不会做任何事情。

基本上你会想要 relative 这将允许你根据元素自然设置的位置来定位元素，并且它“不会影响任何其他元素的位置；因此，为页面布局中的元素与位置是静态的一样。

【讨论】：

谢谢兄弟，我会多学习和练习职位的...

【解决方案2】：

完全同意文森特的观点，这看起来像这样的工作：

.classNameOfElementsToMove {
position: relative;
left: 100px;
}

这会将类 100px 的所有元素向右移动（根据自己的喜好进行调整），而不会影响其他元素。请注意（尽管我认为这对您的情况无关紧要）元素仍会占用页面流中的空间，就好像它们处于正常位置一样。

【讨论】：