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

Answer 2

为所有元素使用单独的容器（不需要额外的边距等）。

.story{
    border: 1px solid #000;
}

.story header {
    background: #000;
    color: #fff;
    padding: 10px;
}

.story__body {
    padding: 10px;
}

<div class="story">
    <header>
        Story header
    </header>
    <div class="story__body">
        <p>Story body</p>
    </div>
</div>

Answer 3

你真的应该为每个不同的部分都有一个容器。当你使用（更真实的）虚假文本时，它会更加明显：

01:01:00 AM

我经常使用类，然后在CSS中用作选择器。它更高效，特别是避免了CSS特异性问题，并且更加清晰。

填充：在每个子<div class="story"> <header class="story-header"> <h1>Story Header</h1> </header> <div class="story-content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto inventore in similique explicabo voluptate eveniet. Consectetur suscipit soluta nam dolore officia nemo architecto natus voluptates iste laboriosam debitis adipisci.</p> </div> </div>和.story-header上设置。如果需要，您可以从内容中删除padding-bottom和padding-top，或者定义resp。 .story-content和padding: 10px 10px 0 10px
border：相同的技巧：每个孩子都有一个边框然后你删除2个中间的“线”。在它们两者上定义（默认）颜色并在另一个上更改它（通常更短的CSS）

CSS

padding: 0 10px 10px 10px

小提琴：https://jsfiddle.net/dada0s0d/6/

Answer 4

这会有用吗？

#story {
  //something general

}
#story p {
  background: black;
  color: white;
  margin: none;
}
#story div {
  padding: 10px;
  border: blue 2px solid;
  border-top: none;
}

<div id="story">
  <p>header</p>
  <div>body</div>
</div>

我现在不能做一个小提琴，但试试这个代码。快乐的编码！

Answer 5

HTML

<div id="story">
    <header>Story Header</header>
    <div class="story-body">Story body.</div>
</div>

CSS

#story{    
    border: 1px solid blue;
    text-align:center;
    height:300px;
    width:200px;
}

header{
      padding:10px;
      background-color:#000;
      color:#fff;height:30px}
.story-body{
    padding:20px 10px 10px;
}

这是您的Demo

Answer 6

<强> HTML

<div class="container">
<div class="header">Header story</div>
</div>

<强> CSS

    .container{width:300px;
height:400px;
    border-top: 1px solid blue;
    border-right: 1px solid blue;
    border-left: 3px solid blue;
    border-bottom: 3px solid blue;
}
.header{background:black;color:white;font-size:20px;font-weight:bold;
height:100px;text-align:center;line-height:100px;
}

请参阅Fiddle了解更多

如何在CSS中创建此框（请参阅我的图片）？

6 个答案: