Escriu per cercar…

Box

Un element HTML és un rectangle que està dins un altre rectangle.

Introducció

Tots els elements HTML són rectangles que cada navegador HTML els hi assigna unes propietats per defecte que determinen com es visualitzen els elements.

En aquesta activitat veurem quines són aquestes propietats i com pots modificar-les.

Crea un nou projecte html-box.

Comença amb aquesta plantilla:

html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Box</title>
</head>
<body class="prose">
    <h1>Hello boxes!</h1>
</body>
</html>
not-prose

Per aquesta activitat no fem servier el plugin typography.

PENDENT

explicar <div> bloc bàsic de construcció, moure inline aquí, prose not-prose

Un document HTML es visualitza com capses dins de capses, on tots els elements són capses:

No importa com es veu un element: tots els elements ocupen l’espai d’un rectangle:

  • Dilluns
  • Dimars
  • Dimecres

Pots veure el codi si vols:

Show solution
html
<div class="border border-5 m-5">
    <ul class="border border-5 border-red-500">
        <li class="border border-5 border-blue-800">Dilluns</li>
        <li class="border border-5 border-blue-800">Dimars</li>
        <li class="border border-5 border-blue-800">Dimecres</li>
    </ul>
</div>

Tot element té 4 propietats que modifiquen com es visualitza la capsa:

A continuació tens l’explicació:

PropietatDescripció
L’àrea on es mostra el contingut.
paddingL’espai en blanc entre el contingut i el border.
borderLa vora de l’element que pot tenir gruix i color.
marginL’espai en blanc entre el border i la els marges de la capsa.

Padding

Tailwind - Padding

Utilitza les utilitats p-<number> com p-4 i p-8 per controlar el padding a tots els costats d’un element:

p-8
html
<div class="p-8 border-2">p-8</div>

Estàs llegint una vista prèvia.

Inicia sessió per llegir l'article complet. Qualsevol compte obre 4 articles gratuïts al mes; l'alumnat i el professorat llegeixen les pàgines del seu curs sense límit.

Inicia sessió