Le positionnement

Le contenu d’une balise éditoriale (c’est à dire p, h1, h2, ul li) se compose généralement de texte, d’images ou de vidéos.
Ces contenus sont parfois agrémentés de balises de mise en valeur comme strong, em ou span

On trouve également des balises de lien hypertexte : <a href="">

Les mots du textes, les images, les vidéos et toutes balises citées ci-dessus sont des éléments inline.
C’est à dire qu’ils se placent par défaut les uns après les autres, contrairement aux balises block, qui s’empilent.

Déterminer l’alignement sur l’horizontal

Vous pouvez utiliser :

• text-align qui permet d’aligner ou de centrer texte, images et vidéos
• margin-left et margin-right qui permettent de créer des espaces avant et après les balises inline (donc strong, em, etc.)

Attention : les marges hautes et basses ne sont pas prise en compte pour les éléments inline !

<p>
		Lorem ipsum dolor sit amet consectetur adipisicing elit. <a href="latin.html">Vel iste laboriosam </a> facilis laborum! Aut eligendi ratione eaque expedita, ipsa dolore iusto? Dolorum recusandae explicabo cupiditate aliquid in magni eius quae?
</p>

p {
	width: 500px;
	text-align: center;
}

p a {
	margin-left: 10px;
	margin-right: 10px;
}

• on centre le texte à l’intérieur du paragraphe (mais pas la balise paragraphe !)
• on applique 10px d’espace à gauche et à droite des liens présents dans le paragraphe

Créer une marge interne pour augmenter la surface de la balise

Vous pouvez utiliser les propriétés : padding-left, padding-right, padding-top, padding-bottom

L’interlignage

line-height permet de contrôler la hauteur d’une ligne de texte, on peut considérer que c’est une technique de positionnement.

Par défaut, les éléments de type block s’empilent les uns au dessus des autres. La seule manière de les positionner pour le moment est de contrôler l’espace vertical qui les sépare les uns des autres, et l’espace horizontal sur leur gauche et leur droite.

 p {
        margin-top: 10px;
        margin-bottom: 10px;
        margin-left: 20px;
        margin-right: 20px;
        background-color: orange;
      }

On utilise les marges externes margin pour cela (et pas le padding, sauf exception).

La propriété raccourcie

p {
    margin: 10px 30px 15px 30px;
}

Cette syntaxe se lit dans l’ordre : HAUT DROIT BAS GAUCHE (comme les aiguilles d’une montre)
Les paragraphes auront tous un margin-top de 10px, un margin-droit de 30px, un margin-bottom de 15px et un margin-top de 30px.

Il faut distinguer le centrage du contenu inline, et le centrage d’un bloc entier au milieu d’un autre bloc.

Soyons clairs tout de suite : le centrage d’un bloc ne peut pas se faire avec la propriété CSS text-align : center;

margin-left: auto et margin-right: auto

La marge automatique à droite et à gauche d’une balise de type bloc permet de la centrer au milieu de son container.

Mais il y a une condition pour que ça marche !

La balise que vous voulez centrer doit être moins large que sa balise parent. Si ça peut paraitre logique, il faut se rappeler qu’une balise block occupe par défaut la même largeur que son parent. Donc vous devez absolument spécifier un width à votre balise, dont la valeur est inférieure au width de son parent.

Exemple :

On veut un bloc container de largeur width: 100%; avec un paragraphe de 300 pixels de large centré au milieu.

div {
    width: 950px;
	background-color: #aaa;
}

p {
	width: 300px;
	margin-right: auto;
	margin-left: auto;
	background-color: orange;
}

 <div>
    Container de largeur width: 100%;
    <p>Paragraphe de 300 pixels de large
    centré</p>
  </div>
  

Elle détache une balise du flux pour la positionner à droite ou à gauche de son container tout en étant contournée par les autres balises (block ou inline).

img {
      float: left; 
    }

 <p>Vel eum iure reprehenderit .... quo voluptas nulla pariatur. 
    <img src="assets/images/big-lebowski.jpg"/>
    Quis autem vel eum iure reprehenderit .... vel illum qui dolorem eum fugiat quo 
    voluptas nulla pariatur</p>

La propriété flottante est très largement utilisée sur les images

Elle permet de décaler un bloc par rapport à son positionnement d’origine sans impact sur la position des blocs au dessus et en dessous.

On l’utilise pour des petits décalages de l’ordre de quelques pixels. Au delà, c’est probablement que vos choix de mise en page ne sont pas bons.

p {
        margin-top: 20px;
        margin-bottom: 20px;
        background-color: lime;
      }
      
      .decalage {
        position: relative;
        top: -30px;
        left: 30px;
      }
        

 <p>Autem vel eum iure reprehenderit qui in ea eum fugiat quo voluptas nulla pariatur</p>
    <p class="decalage">Vel eum iure reprehenderit qui in ea eum fugiat quo voluptas nulla pariatur</p>
    <p>Sidious eum iure reprehenderit qui in ea eum fugiat quo voluptas nulla pariatur</p>