Как избежать прикосновения обоих 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:

<code><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 }}

Creation date: {{checkboxesBlog.controls.blogTitle.creationDate}}

Это приводит к следующему:

Как остановить Info класс от прикосновения верхняя граница?

В этом примере: https://www.w3schools.com/code/tryit.asp?filename=GFVBV2TBBD5Q

Они не используют никаких дополнительных отступов, пробелов или дополнительных div, и что это то, что происходит, и я также могу сделать так, чтобы div автоматически не сидели друг у друга на голове?

Answer 1

Вы не можете поместить маржу на границу, но вы можете эмулировать границу с другим div, чтобы действовать как в вашем случае.

Вам также понадобится еще один div, чтобы оставить пространство между границей и внутренним div. Это пространство определено в padding-top: 5px;, что дает пространство 5 пикселей, и вам нужно 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, который уже состоит из двух элементов, H2 по умолчанию имеет собственное поле, как и любой другой элемент H *, то же самое касается footer, и именно здесь берутся поля и пробелы.

Другое отличие состоит в том, что вы пытаетесь освободить пространство между границей и собственным элементом, 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>