html - 边距底部不适用于固定位置

Question

我想在我的应用程序顶部创建简单的模态，我试图将这个模态从 20-30px 等边缘移动，我试图在那里使用边距，但边距顶部仅有效，底部被忽略。我有两个用例:首先，通过使用网格，我希望当内容没有溢出时模态居中；其次，当内容溢出时，我希望顶部和底部边缘有边距。看这个:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}
.background {
  position: fixed;
  top: 0;
  bottom: 0;
  overflow-y: auto;
  display: grid;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background-color: rgba(0,0,0,.3);
}
.modal {
  width: 500px;
  padding: 3rem;
  margin: 2rem 0;
  background-color: white;
}

<h1>Some content behind</h1>
<div class="background">
   <div class="modal">
     <h1>Some modal</h1>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias 
       perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias 
       perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias 
       perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias 
       perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias 
       perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
     
   </div>
</div>

Answer 1

您需要添加一个额外的容器才能实现这一目的。

并且，使用 margin: 2rem auto; 而不是使用 display: grid;。

.modal-bg {
  position: fixed;
  top: 0;
  bottom: 0;
  overflow-y: auto;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background-color: rgba(0,0,0,.3);
}

.modal-inner {
  width: 500px;
  margin: 2rem auto;
}

.modal {
  padding: 3rem;
  background-color: white;
}

<div class="modal-bg">
  <div class="modal-inner">
    <div class="modal">
      <h1>Some modal</h1>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
    </div>
  </div>
</div>