En HTML, la plupart des balises peuvent se ranger dans l'une ou l'autre de deux catégories :

Les balises inline : c'est le cas par exemple des liens <a>...</a> ou des balises images <img/>.

Les balises block : c'est le cas par exemple des paragraphes <p>...</p> ou des titres de niveau 1 à 6 comme <h3>...</h3>

block : une balise de type block sur votre page web crée automatiquement un retour à la ligne avant et après.

inline : une balise de type inline se trouve obligatoirement à l'intérieur d'une balise block. Une balise inline ne crée pas de retour à la ligne, le texte qui se trouve à l'intérieur s'écrit donc à la suite du texte précédent, sur la même ligne (c'est pour cela que l'on parle de balise « en ligne »).

Le modèle de boite

Le modèle des boîtes CSS se base sur le principe que tous les éléments utilisés en HTML sont mis en forme sur la base de zones rectangulaires. Ainsi chaque élément lorsqu'il est rendu dans le navigateur aura les contours suivants :

   - Le contenu de l'élément dont la taille est définie par sa largeur width et sa hauteur height
   - Son espacement intérieur : propriété padding
   - Sa bordure : propriété border
   - Sa marge : propriété margin

Les espacements (margin, padding) et les bordures peuvent être définis dans le 4 différentes directions

<!DOCTYPE html>
<html>

<head>

<style>
		p {
			margin:50px;
			padding:30px;
			border-color:#000;
			border-style:solid;
			border-width:5px;
			background-image:url(bob.jpg);
			background-repeat:no-repeat;
			background-color:#33FF33;
			width:200px;
			height:50px;
		}
</style>

</head>

<body>
		<p>Je suis un paragraphe.</p>
		<p>Je suis un autre paragraphe qui suit le premier.</p>
		<p>Je suis un autre paragraphe qui suit le second avec beaucoup de lignes.<br/>
		Et ce paragraphe depasse les capacités du bloc.<br/>
		ce qui produit un dépassement de contenu</p>
</body>

</html>

Voir

CSS Modèle de boite

Les balises de type block et inline:

Le modèle de boite