html - 在另一个标题中创建一个 div

Question

这个有点难以解释:我在另一个 div 中有一个 div，但内部 div 应该充当包含 div 的 header 。问题是我需要在包含的 div 中进行填充，因此包含的内容将始终适应填充。如何保持容器的填充，但包含的对齐顶部、左侧和右侧的边距为 0？

代码如下:

<div class="notification">
    <div class="notification_head">
        <p>Testing a notification.</p>
    </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean congue nibh vel velit posuere, eu rhoncus purus interdum. Praesent urna metus, mollis sed blandit ut, bibendum at neque. Aenean nulla metus, faucibus eget metus pharetra, ullamcorper placerat quam. Aenean euismod sagittis hendrerit. Integer vel dolor nibh. Nulla dignissim lacinia orci eget pellentesque. Donec id scelerisque metus. Proin eleifend finibus tellus at malesuada. Praesent bibendum, est bibendum sagittis dignissim, mi magna imperdiet quam, nec laoreet massa ante et arcu. Sed imperdiet nec dolor vitae eleifend. Duis non velit faucibus purus hendrerit dapibus sit amet id est. In consequat dapibus ornare. Sed vel leo purus.</p>
</div>

还有 CSS:

.notification {
border: 1px solid #fc2929;
border-radius: 7px;
padding: 0 2% 2% 2%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

.notification .notification_head {
width: 100%;
background: #fc2929;
color: #ffffff;
display: inline-block;
padding: 0.5%;
}

这是它的样子:

Answer 1

不要在容器元素上使用填充。在内部上下文 block 级 元素上使用填充 p, h1, h2, ul, ol... 等:

*{margin:0;padding:0;} /* Ugly reset */

p, h1, h2, h3/*etc*/{
  padding:15px;
}
.notification {
  border: 1px solid #fc2929;
  border-radius: 7px;
  overflow:auto;
}
.notification .notification_head {
  background: #fc2929;
  color: #ffffff;
}

<div class="notification">
  <div class="notification_head">
    <p>Testing a notification.</p>
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean congue nibh vel velit posuere, eu rhoncus purus interdum. Praesent urna metus, mollis sed blandit ut, bibendum at neque. Aenean nulla metus, faucibus eget metus pharetra, ullamcorper placerat quam. Aenean euismod sagittis hendrerit.</p>
</div>

以上会给你最简单干净的结果