在另一个 header 中创建一个 div

Question

这个有点难以解释：我在另一个里面有一个 div，但是里面的 div 应该像包含 [=26 的 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

您需要用您的文字创建另一个 div 并根据需要制作 padding/margins。

.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>

Answer 2

不要在容器元素上使用填充。在内部上下文 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>

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

在另一个 header 中创建一个 div

Make a div inside another its header

html

css

margin

padding