S'il vous plaît donnez-moi un peu d'espace

Il existe toutes sortes de façons de le faire. Un peu plus conseillé et mieux adapté à certaines situations que d'autres, bien sûr.

Nous pourrions le faire directement dans HTML:

 <p> Nous allons d'une ligne ... <br> <br> En baisse de quelques autres. </p>

Mais c'est pour ça que CSS est vraiment:

 <p> Nous allons d'une ligne ... <span> vers le bas de plus. </span> </p>

 portée {
  Affichage: bloc;
  marge-bloc-start: 1.5rem;
}

La hauteur de ligne peut également nous donner une respiration supplémentaire entre les lignes de texte:

 p {
  hauteur de ligne: 1,35;
}

Depuis que nous parlons de texte, il y a aussi l'espacement des lettres et l'espacement des mots, sans parler de l'indent de texte:

Mais parlons des boîtes au lieu du texte. Dites que nous avons deux divs simples:

 <div> Twiddle Dee </div>
<div> Twiddle dum </div>

Celles-ci sont au niveau du bloc, donc ils sont déjà sur différentes lignes. Nous pouvons à nouveau atteindre la marge. Ou nous pourrions créer l'impression de l'espace avec un rembourrage. Je suppose que nous pourrions traduire ces rejets dans les deux sens:

 Div: Nth-Child (2) {
  Transform: Translatey (100px);
}

Mais peut-être que ces éléments sont absolument positionnés afin que nous puissions utiliser des décalages physiques:

 div {
  Position: absolue;
}
Div: Nth-Child (1) {
  Encart: 0;
}
Div: Nth-Child (2) {
  Instruction-inline-start: 100px; / * ou en haut: 100px; * /
}

Si nous travaillons dans un récipient de grille, nous obtenons l'âge de GAP:

 <segction>
  <div> Twiddle Dee </div>
  <div> Twiddle dum </div>
 section></segction>

 section {
  Affichage: grille;
  grille-template-colonnes: 1fr 1fr;
  Écart: 100px;
}

Même accord avec un conteneur flexible:

 section {
  Affichage: flex;
  Écart: 100px;
}

Bien que nous travaillions dans une grille et des conteneurs flexibles, nous pourrions faire appel à n'importe quelle propriété d'alignement pour générer de l'espace.

 section {
  Affichage: flex;
  Align-Items: Space-Entween;
  justifier-contenu: espace-intermédiaire;
}

Il y a des tables, bien sûr:

table>

Ou l'approche CSS-Y:

 / * Nous pourrions utiliser «affichage: table» si nous ne travaillons pas dans un élément de table. * /
tableau {
  Espacement des bordures: 100px;
}

Allons plus loin dans le champ gauche. Nous pouvons faire ressembler un élément à deux en utilisant un dégradé linéaire avec un arrêt de couleur dure:

 div {
  Image d'arrière-plan:
    gradient linéaire (
      à droite,
      RVB (255 105 0/1) 50%,
      RVB (207 46 46/1) 50%,
      RVB (207 46 46/1) 100%
    ));
}

Ensuite, nous faisons un faux de la tête et insérons un arrêt de couleur transparente dure entre les deux couleurs:

Tant que nous fassons le bacon ici, pourrait aussi bien se lancer dans l'ancien tour de bordure «transparente»:

Revenons au texte un instant. Peut-être que nous flottons un élément et que nous voulons que du texte s'enroule… sous la forme de l'élément flotté tout en laissant un peu d'espace entre les deux. Nous avons la marge de forme pour cela:

Oserais-je même mentionner les jours d'espaceur.gif?

 <div> Twiddle Dee </div>
<img  src="spacer.gif" alt="S'il vous plaît donnez-moi un peu d'espace" > 
<div> Twiddle dum </div>

Il doit y avoir plus

Vous êtes tous un groupe intelligent avec de grandes idées. Ayez-vous!

Twiddle Dee

Twiddle dum

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!