Les dimensions

Deux nouvelles propriétés : Width (Largeur) et Height (hauteur)

Paragraphe 1 : 500 px de large


<p style="width: 500px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non soluta incidunt illo totam cumque nobis provident fugit quo, consectetur sequi nisi. Omnis officiis doloremque, magni distinctio eius fuga non, quos!

Paragraphe 2 : 100px de haut


<p style="height: 100px">Lorem ipsum dolor sit amet, consectetur ...</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit maxime id quasi commodi nulla, sint laborum, quia neque animi consequatur magni sit ducimus culpa placeat unde, aspernatur quas perferendis amet!

Paragraphe 3 : 300px de large et 300px de haut


<p style="width: 300px; height: 300px;">Voluptatum eos porro ut, possimus!...</p>

Voluptatum eos porro ut, possimus! Reiciendis, natus. Ab, necessitatibus, doloremque.

Dans certain cas le texte déborde du contenu, il existe la propriété overflow pour parer ce problème

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, voluptates deserunt tenetur? Soluta magnam atque, aut cum nobis, tempora odio quaerat minima modi sit autem, commodi possimus reprehenderit veniam, quidem.

Dans cette exemple on crée une div de 500 px de large et un paragraphe de 50% de la div


<div style="width: 500px; background-color: lightgrey"> <p style="width: 50%;">Lorem ipsum dolor sit...</p></div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa libero natus, officiis quae. Iure dicta cupiditate modi debitis quis laboriosam, necessitatibus nesciunt magnam et illo, enim quas perferendis molestiae tempora!

Paragraphe de 60% de large avec un texte justifié

<p style="width: 60%; text-align: justify;">Lorem ipsum dolor sit amet,</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque animi, suscipit voluptate, et vitae quidem esse sit voluptatibus nihil voluptas aspernatur. Voluptatum modi sit, nemo veniam eligendi dolor dignissimos numquam?


Pour donner des limites de taille au bloc, 4 propriétés : min-width, max-width, min-height, max-height


Paragraphe de 50% de large qui ne dépasse pas 500px

<p style="width: 50%; max-width: 500px;">Lorem ipsum dolor sit amet, consectetur...</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus corporis repellat nisi vero, sunt possimus recusandae enim, cumque commodi, aspernatur ad, esse nobis odit exercitationem debitis labore deserunt laudantium quam.