Le positionnement dans la page

Une balise <div></div> ordinaire

Une balise <div></div> avec un arrière-plan et une couleur.

La même balise avec un padding uniforme

La même balise avec un margin uniforme

On ajoute une bordure (uniforme)

On simplifie la bordure (l'ordre des valeurs n'est pas important)

Cette boîte était trop large

Et si on la centrait?

J'aime bien simplifier les choses. Remarquez bien l'ordre des valeurs...

Et comme si c'était pas déjà assez simple...

On ajoute une image et un peu de texte. Curabitur sit amet lorem gravida nisi dictum rhoncus in in sem. In id tellus sit amet enim convallis malesuada et quis lorem. Donec posuere est et magna sagittis vitae blandit leo euismod. Duis bibendum ligula vitae nulla ultricies malesuada. Morbi malesuada nulla vel magna dapibus vel condimentum lectus luctus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec felis mi, auctor nec malesuada faucibus, auctor at tellus. Suspendisse felis augue, ultricies ut commodo ac, sodales vel turpis. Sed mollis elit ut turpis vestibulum cursus. Mauris dictum erat ultricies felis laoreet ac ullamcorper libero pharetra. Ut sit amet blandit odio. Sed facilisis risus vel quam pretium non pretium velit blandit. Vestibulum nisi lectus, rhoncus ac tincidunt a, blandit non dolor.

Elle est mieux intégrée au texte ainsi... Curabitur sit amet lorem gravida nisi dictum rhoncus in in sem. In id tellus sit amet enim convallis malesuada et quis lorem. Donec posuere est et magna sagittis vitae blandit leo euismod. Duis bibendum ligula vitae nulla ultricies malesuada. Morbi malesuada nulla vel magna dapibus vel condimentum lectus luctus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec felis mi, auctor nec malesuada faucibus, auctor at tellus. Suspendisse felis augue, ultricies ut commodo ac, sodales vel turpis. Sed mollis elit ut turpis vestibulum cursus. Mauris dictum erat ultricies felis laoreet ac ullamcorper libero pharetra. Ut sit amet blandit odio. Sed facilisis risus vel quam pretium non pretium velit blandit. Vestibulum nisi lectus, rhoncus ac tincidunt a, blandit non dolor.

Il manquait une petite touche. Curabitur sit amet lorem gravida nisi dictum rhoncus in in sem. In id tellus sit amet enim convallis malesuada et quis lorem. Donec posuere est et magna sagittis vitae blandit leo euismod. Duis bibendum ligula vitae nulla ultricies malesuada. Morbi malesuada nulla vel magna dapibus vel condimentum lectus luctus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec felis mi, auctor nec malesuada faucibus, auctor at tellus. Suspendisse felis augue, ultricies ut commodo ac, sodales vel turpis. Sed mollis elit ut turpis vestibulum cursus. Mauris dictum erat ultricies felis laoreet ac ullamcorper libero pharetra. Ut sit amet blandit odio. Sed facilisis risus vel quam pretium non pretium velit blandit. Vestibulum nisi lectus, rhoncus ac tincidunt a, blandit non dolor.

Le client la préfère ainsi. Curabitur sit amet lorem gravida nisi dictum rhoncus in in sem. In id tellus sit amet enim convallis malesuada et quis lorem. Donec posuere est et magna sagittis vitae blandit leo euismod. Duis bibendum ligula vitae nulla ultricies malesuada. Morbi malesuada nulla vel magna dapibus vel condimentum lectus luctus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec felis mi, auctor nec malesuada faucibus, auctor at tellus. Suspendisse felis augue, ultricies ut commodo ac, sodales vel turpis. Sed mollis elit ut turpis vestibulum cursus. Mauris dictum erat ultricies felis laoreet ac ullamcorper libero pharetra. Ut sit amet blandit odio. Sed facilisis risus vel quam pretium non pretium velit blandit. Vestibulum nisi lectus, rhoncus ac tincidunt a, blandit non dolor.

On pourrait bien ajouter un titre

Et quelques paragraphes. Curabitur sit amet lorem gravida nisi dictum rhoncus in in sem. In id tellus sit amet enim convallis malesuada et quis lorem.

Donec posuere est et magna sagittis vitae blandit leo euismod. Duis bibendum ligula vitae nulla ultricies malesuada. Morbi malesuada nulla vel magna dapibus vel condimentum lectus luctus.Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Donec felis mi, auctor nec malesuada faucibus, auctor at tellus. Suspendisse felis augue, ultricies ut commodo ac, sodales vel turpis. Sed mollis elit ut turpis vestibulum cursus. Mauris dictum erat ultricies felis laoreet ac ullamcorper libero pharetra. Ut sit amet blandit odio. Sed facilisis risus vel quam pretium non pretium velit blandit. Vestibulum nisi lectus, rhoncus ac tincidunt a, blandit non dolor.

C'est un joli titre

Souvent, le premier paragraphe est plus important. On lui donne de l'importance. Curabitur sit amet lorem gravida nisi dictum rhoncus in in sem. In id tellus sit amet enim convallis malesuada et quis lorem.

On peut également embellir le texte en ajoutant une letterine. On ajoute une balise span. Donec posuere est et magna sagittis vitae blandit leo euismod. Duis bibendum ligula vitae nulla ultricies malesuada. Morbi malesuada nulla vel magna dapibus vel condimentum lectus luctus.Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Donec felis mi, auctor nec malesuada faucibus, auctor at tellus. Suspendisse felis augue, ultricies ut commodo ac, sodales vel turpis. Sed mollis elit ut turpis vestibulum cursus. Mauris dictum erat ultricies felis laoreet ac ullamcorper libero pharetra. Ut sit amet blandit odio. Sed facilisis risus vel quam pretium non pretium velit blandit. Vestibulum nisi lectus, rhoncus ac tincidunt a, blandit non dolor.

C'est un joli titre

Curabitur sit amet lorem gravida nisi dictum rhoncus in in sem. In id tellus sit amet enim convallis malesuada et quis lorem.

Elle était un peu chétive cette lettrine. Donec posuere est et magna sagittis vitae blandit leo euismod. Duis bibendum ligula vitae nulla ultricies malesuada. Morbi malesuada nulla vel magna dapibus vel condimentum lectus luctus.Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Donec felis mi, auctor nec malesuada faucibus, auctor at tellus. Suspendisse felis augue, ultricies ut commodo ac, sodales vel turpis. Sed mollis elit ut turpis vestibulum cursus. Mauris dictum erat ultricies felis laoreet ac ullamcorper libero pharetra. Ut sit amet blandit odio. Sed facilisis risus vel quam pretium non pretium velit blandit. Vestibulum nisi lectus, rhoncus ac tincidunt a, blandit non dolor.

C'est un joli titre

Curabitur sit amet lorem gravida nisi dictum rhoncus in in sem. In id tellus sit amet enim convallis malesuada et quis lorem.

Et on sait déjà comment l'intégrer au texte. Donec posuere est et magna sagittis vitae blandit leo euismod. Duis bibendum ligula vitae nulla ultricies malesuada. Morbi malesuada nulla vel magna dapibus vel condimentum lectus luctus.Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Donec felis mi, auctor nec malesuada faucibus, auctor at tellus. Suspendisse felis augue, ultricies ut commodo ac, sodales vel turpis. Sed mollis elit ut turpis vestibulum cursus. Mauris dictum erat ultricies felis laoreet ac ullamcorper libero pharetra. Ut sit amet blandit odio. Sed facilisis risus vel quam pretium non pretium velit blandit. Vestibulum nisi lectus, rhoncus ac tincidunt a, blandit non dolor.

C'est un joli titre

Curabitur sit amet lorem gravida nisi dictum rhoncus in in sem. In id tellus sit amet enim convallis malesuada et quis lorem.

Avec quelques petits ajustements. Donec posuere est et magna sagittis vitae blandit leo euismod. Duis bibendum ligula vitae nulla ultricies malesuada. Morbi malesuada nulla vel magna dapibus vel condimentum lectus luctus.Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Donec felis mi, auctor nec malesuada faucibus, auctor at tellus. Suspendisse felis augue, ultricies ut commodo ac, sodales vel turpis. Sed mollis elit ut turpis vestibulum cursus. Mauris dictum erat ultricies felis laoreet ac ullamcorper libero pharetra. Ut sit amet blandit odio. Sed facilisis risus vel quam pretium non pretium velit blandit. Vestibulum nisi lectus, rhoncus ac tincidunt a, blandit non dolor.