在另一个标题中创建一个 div答案

【问题标题】：Make a div inside another its header在另一个标题中创建一个 div
【发布时间】：2015-11-09 09:42:05
【问题描述】：

这有点难以解释：我在另一个 div 中有一个 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%;
}

这就是它的样子：

【问题讨论】：

标签： html css margin padding

【解决方案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>

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

【讨论】：

【解决方案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>

【讨论】：