Petit problème Html

Salut,
oui c'est la base en CSS : jouer sur les marges.

2 types de marges et 4 côtés possibles:
marges internes de l'élément et marges internes qui ont chacun une valeur : haut, droite, bas gauche(top, right, bottom, left).

Les unités possibles aussi à savoir aussi en différenciant celles absolue(une valeur fixe comme le px pour pixel) et celles qui sont relatives (pas des valeurs fixes mais proportionnelles/scalaires comme le pourcentage "%" et quadratin "em").
A noter aussi que le type d'élément importe aussi pour cela, c'est exprimé par la valeur display qui par défaut à pour valeur inline ou block(en ligne ou bloc) et qui indique à l'élément qu'il doit se comporter comme un bloc ou un élément en ligne.

Je vous conseille surtout de faire quelques tutos/cours de bases de CSS où vous pourrez pratiquer et comprendre, vous familiariser avec les propriétés CSS les plus communes et utilisées.
C'est assez simple et il y a bien d'autres possibilités de mise en page en CSS qu'avec les marges uniquement, à utiliser quand les marges ne conviennent pas ou qu'on veut faire autrement.

https://duckduckgo.com/?t=ffab&q=positionnement+CSS&ia=web


Par soucis de précision:

<span style='margin-left:5%;'>ce texte sera ecarté de 5% de son bord gauche</span>

Et bien sûr éviter au max de passer par l'attribut style dela balise et utiliser les class id et autres sélecteurs de balises CSS.
Mais oui la réponse et dans le CSS et par contre montrez une image ne permet pas de vous aider ou même de voir votre travail, ce qu'il faut comprendre c'est que HTML et CSS c'est du texte qui est interprété par le navigateur pour s'afficher comme demandé:

donc vous ne travaillez que sur le texte (HTML et CSS sans compter les scripts éventuels de programmation) et c'est dans le texte que doit se situer aussi bien votre question que sa réponse.

Par exemple ici vous parlez de "cases" ce qui ne correspond à rien, il s'agit bien d'éléments HTML et si vous avez noté ce que j'ai dit plus haut les éléments HTML(chaque élément de la page) à par défaut un certain type de comportement(en ligne ou bloc) qui va changer leur placement dans le flux du document.
Le flux du document c'est autant l'ordre et l'apparition des éléments que la façon dont il vont se suivre(ou pas) les uns les autres.

Votre image ne montrant pas cela il est donc impossible de parler de mise en page puisque celle ci aussi bien dans l'ordre du HTML que les propriétés CSS que vous pouvez indiquez s'appuye sur ce flux et uniquement sur ce flux, c'est à dire le texte HTML de votre page + CSS.

Si vous parlez de cases prévues pour l'affichage vous passez à côté du premier principe des page web:

le contenu et la mise en forme sont séparés. Les contenus c'est ce que contiennent vos éléments HTML et la mise en forme/présentation c'est les propriétés CSS que vous indiquez à des éléments HTML. Ceux ci sont idéalement "interchangeables" donc parler de case ne tiennent compte que du résultat visuel alors que c'est bien du HTML et comment il est représenté qui implique qu'on indique telle ou telle règle pour le résultat voulu.


Exemples quer vous pouvez tester(si toutefois vous où et comment inclure CSC correctement dans une page):

Pour le CSS suivant:

ul li{
float:left;
margin-right: 1em;
}

Vous obtenez une mise en page pour ce HTML précis:

<ul>
<li>un élément de liste </li>
<li>un 2nd élément de liste </li>
<li>un 3ème élément de liste </li>
</ul>

Mais que si vous remplacez le CSS par cela

ul li{
display:block;
margin-bottom:1em;
width:100%;
}

Votre présentation des mêmes éléments HTML n'a rien du tout à voir.
En testant vous verrez:
Dans le premier cas des éléments sur la même ligne qui s'alignent sur la gauche de leur prédécesseur (voir la propriété CSS float) et écarté par une marge externe de 1 hauteur d ligne(voir l'unité em).

Avec le second CSS les éléments (passés en display:block au lieu d'être des éléments qui doivent se suivre sur la même ligne) vous avez 3 éléments de liste non ordonnées qui s'affichent sur 3 lignes différentes séparées par une marge externe en bas de 1em de distance.


Bref avant de considérer votre mise en page c'est le HTML qu'il faut regarder et ensuite voir comment vous pouvez obtenir le résultat voulu, le HTML changera les possibilités CSS et vous ne pouvez pas raisonner si vous ne pensez pas aux éléments HTML de la page, dans leur ensemble en général car il est évident que si vous modifier la mise en page d'un ou plusieurs éléments contenus dans votre page cela aura un impact sur le reste du flux(les éléments précédents et suivants donc).

C'est un ensemble et vous ne pouvez avoir l'un sans l'autre.

Pour rappel HTML sert à indiquer les contenus inclus dans des balises, à indiquer leur ordre et hiérarchie et surtout(l'un des plus importants rôle) la valeur et le sens (sémantique) de ces éléments. Exemple une image est indiqué par la balise "img", un texte de paragraphe par la balise "p", un titre par l'une des balises de titre(h1,h2...h6) selon l'importance du titre dans la page(sa hiérarchie)

Et CSS sert à manipuler l'apparence, les couleurs et la mise en page/positionnement de ces éléments.

Avec la pratique il y a une part d'imagination/automatisme à transformer un visuel en : ses éléments qui ont du sens et sont du contenus(écrire le HTML) et l'apparence voulue (écrire le CSS du HTML particulier à une page ou zone d'une page).