如何避免两个div都碰到顶部边框？

Question

CSS:

.TopLeft
{
  background-color: pink;
  display: flex;
  font-size: 20px;
  float: left;
}

.TopRight
{
  background-color: pink;
  display: flex;
  font-size: 20px;
  float: right;
}

.Info
{

  background-color: #FF6347;
  border:   10px solid CornflowerBlue;
  padding:  30px;  
}

HTML:

<ng-container *ngIf = "blogs.length == 0" >
    <h1 class = "Info"> No blogs to display! </h1>
</ng-container>

<ng-container *ngIf = "blogs.length > 0">

    <div class = "Info"> Existing {{blogs.length}} blogs are as follows: </div>

        <ng-container *ngIf = "view.value === 'gridView'" >
            <ul>
                <div class = "gridView">
                <ng-container *ngFor = "let checkboxesBlog of getCheckboxes_FormGroup.controls; let i = index;" >
                    <ng-container *ngIf = "checkboxesBlog.controls.visible.value === true"; class = "blogList">

                        <div class= "pqr1" >

                                <!-- pre represents new line -->
                                <pre routerLink = "/editor/{{checkboxesBlog.controls.blogTitle.id}}">{{checkboxesBlog.controls.blogTitle.value }}</pre>

                                <pre>Creation date: {{checkboxesBlog.controls.blogTitle.creationDate}}</pre>

                                <ng-container [formGroup] = "checkboxesBlog">
                                    <input type   = "checkbox"
                                           formControlName = "checkboxValue"
                                           (click) = "onCheckboxClicked( i )">
                                </ng-container>
                        </div>

                    </ng-container>

                </ng-container>

              </div>
            </ul>
        </ng-container>

它的结果是这样的。

如何停止 Info 类，以免触及上边框？

在这个例子中。https:/www.w3schools.comcodetryit.asp?filename=GFVBV2TBBD5Q

他们没有使用任何额外的padding或空格或额外的div，那么是什么在做，我也可以做这样的div自动不坐在对方的头上？

Answer 1

你不能在边框上加边框，但是你可以用另一个div来模拟边框。

你还需要一个div来给你的border和内部div之间留出空间。 这个空间定义在 padding-top: 5px; 给出了5px的空间，你还需要 margin: 5px; 上，以覆盖其他面。当你自定义该空间时，这两个值都需要更新。

.Info
{
  background-color: #FF6347;
  padding:  30px;
  }
.border {
  background-color: CornflowerBlue;
  padding:  10px;
}

.space {
  background-color: white;
  padding-top:  5px;
  margin: 5px;
}

<div class = "border">
<div class = "space">
    <div class = "Info"> Existing {{blogs.length}} blogs are as follows: </div>
    </div>
</div>

EDIT:

为了回答补充的问题，你提供的W3中的例子使用了 H2 中的元素 content div，仅此一项就已经是2个元素了，H2默认有自己的边距，就像任何其他H*元素一样，同样的情况也适用于 footer 这就是 margin 和 spaces 的来源。

其他的不同之处在于，你试图在边框和它自己的元素之间留出空间。border 是同一个元素的一部分，它环绕在它周围，不能脱离它。这就是为什么我在另一个例子中模仿它的原因。div 绕着第一个的。我曾试图缩小背景的 info div 但我做不到，这并不意味着我没有错过什么，我尝试了所有的东西。

另外，在W3的例子中，没有一个元素使用环绕它的边框，所以你的例子并不能真正代表你的问题，因为元素之间有空间的元素并不在彼此内部。

但它确实给我指出了另一个方向，那就是只使用2个元素而不是3个元素，就像我的第一个例子一样，这个例子给出了 background-color 到里面的元素，这样它就可以被操纵了。

(所有这些都是我的经验之谈，我不是专家，所以也许别人会有不同的解释或做法)

.Info
{
  border:   10px solid CornflowerBlue;
  padding:  30px;
}
.inside{
background-color: #FF6347;
padding:30px;
margin:-25px -30px -30px -30px;
}

<div class = "Info">
<div class = "inside">  Existing {{blogs.length}} blogs are as follows: 
</div>
</div>