在另一个标题内创建一个div

Question

这个有点难以解释：我在另一个内部有一个div，但是内部div应该像包含div的标题一样。问题是我需要在包含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-level元素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>

以上将为您提供最简单，最干净的结果

Answer 2

您需要在文本中创建另一个div并根据需要制作填充/边距。

.notification {
border: 1px solid #fc2929;
border-radius: 7px;
-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;
    
}

.notification_text {
   margin: 15px;
}

<div class="notification">
    <div class="notification_head">
        <p>Testing a notification.</p>
    </div>
    <div class="notification_text">
        <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>
</div>