Html DIV中的DIV和填充问题

我想让我的文章DIV的标题部分占据DIV的全部宽度，并上升到顶部（如第二张图片），但由于DIV的填充，无法实现这一点（参见第二张图片）。有解决办法吗？谢谢

我想要实现的目标：

HTML:

---

您的文章包含相对位置，因此绝对位置将在与容器相关时起作用

.article-headline {
  position:absolute;
  top: 0px;
  left: 0px;
  width:100%
}

工作区：

---

您的文章包含相对位置，因此绝对位置将在与容器相关时起作用

.article-headline {
  position:absolute;
  top: 0px;
  left: 0px;
  width:100%
}

工作区：

新CSS:

.article-headline {
    background:#03F;
    color: #fff;
    border-right:40px;
    border-right-color:#3F3;
    margin: -20px 0 0 -50px;
    width: 662px;
    padding: 10px 0  0 10px;
}

有演示：

新CSS:

.article-headline {
    background:#03F;
    color: #fff;
    border-right:40px;
    border-right-color:#3F3;
    margin: -20px 0 0 -50px;
    width: 662px;
    padding: 10px 0  0 10px;
}

---

有演示：

您可能需要调整一些填充，但这应该可以让您开始。我给标题加了一个

位置：绝对

，并调整了顶部、左侧和右侧以去除边框

---

您可能需要调整一些填充，但这应该可以让您开始。我给标题加了一个

位置：绝对

，并调整了顶部、左侧和右侧以去除边框

---

只需在

中使用负
边距
和
填充
。文章标题

：

.article-headline {
    background:#03F;
    color: #fff;
    border-right:40px;
    border-right-color:#3F3;
    margin: -20px -32px 10px -50px; // this is relative to .article padding
    padding: 5px 40px 0; // this is relative to this margin
}

---

只需在

中使用负
边距
和
填充
。文章标题

：

.article-headline {
    background:#03F;
    color: #fff;
    border-right:40px;
    border-right-color:#3F3;
    margin: -20px -32px 10px -50px; // this is relative to .article padding
    padding: 5px 40px 0; // this is relative to this margin
}

---

对不起，我得把它整理一下才能明白：

HTML:

---

对不起，我得把它整理一下才能明白：

HTML:

---

为什么h1在div中？为什么h1在div中？谢谢-但是看起来小提琴没有返回预期的结果（看不到标题）嗯，它完全显示了另一个CSS（我不习惯这个东西）。从这里粘贴我的，它工作。谢谢-但是看起来小提琴没有返回预期的结果（看不到标题）嗯，它显示了完全另一个CSS（我不习惯这件事）。从这里粘贴我的，它工作。

.article-body {
    padding: 20px 32px 25px 50px;
    margin-right: 50px;
}
.article {
    text-align:justify;
    color:#000;
    opacity:1;
    width: 590px;
    z-index: 15;
    box-shadow:-2px 0 5px 0 rgba(0, 0, 0, 0.5); 
    overflow: visible;
    background: #FFF;
}

.article p {
    padding-right:20px;
    color: #333;
}
.article-headline {
    background:#03F;
    color: #fff;
    border-right:40px;
    border-right-color:#3F3;
    padding-left:30px;
}
.article-headline h1, .article h2 {
    margin-top: -4px;
    padding-bottom: 2px;
}