Per capire come padding e margin incidano sulla formattazione e l’aspetto del vostro sito web, dovete innanzitutto acquisire alcune nozioni di base di HTML. Nel linguaggio di markup è possibile creare tutta una serie di elementi diversi che finiscono per essere visualizzati su un sito web. Tra questi elementi si distinguono due gruppi: gli elementi inline e quelli di blocco.
Gli elementi HTML inline si affiancano al testo del sito web e non necessitano di un paragrafo proprio. Un esempio tipico sono i tag em- o b-, i quali determinano già nello script HTML se il contenuto tra il tag di apertura e quello di chiusura sia visualizzato nel browser web come corsivo o grassetto.
A differenza degli elementi inline, gli elementi di blocco sono sovraordinati e necessitano di un paragrafo proprio. Per questo motivo, potete immaginare gli elementi di blocco come una sorta di scatola che si estende per l’intera larghezza dello schermo. In maniera analoga, naturalmente è anche possibile modificare larghezza e altezza degli elementi di blocco, in modo che il riquadro sia ridotto o ingrandito rispetto allo schermo. Gli elementi di blocco possono essere uniformati l’uno rispetto all’altro e costituiscono quindi un tassello essenziale per il layout di un sito web. I principali rappresentanti di questa categoria di elementi HTML sono, ad esempio, le intestazioni da h1 a h6 e il contenitore div.