html - 我如何在 CSS 中制作这个框(请看我的图片)？

Question

在我的 div 框中，我有一个 body 和 header 部分。我想给 header 部分一个单独的边框，它必须位于 div 框内，并且不能有任何填充。应该完全像我给定的图像:

这是我试过的:

HTML:

    <div id="story">
    <p>

    Story Header

    </p>
    story body.
   </div>

.CSS:

#story{

    border: 1px solid blue;
    padding:10px;

}
#story p{
    border: 1px solid blue;
    background-color:black;
    color:white;
}

看这里: Demo

Answer 1

您可以在页眉上使用负边距..

#story{
    
    border: 1px solid blue;
    padding:10px;
    
}
#story p{
    border: 1px solid green;
    background-color:black;
    color:white;
    padding: 10px;
    margin: -11px -11px 10px -11px;
}

<div id="story">
    <p>
    Story Header     
    </p>
    story body.
</div>

JSFiddle version