Escribe para buscar…

Box

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

Esta página todavía no se ha traducido — se muestra en su idioma original:Català

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 leyendo una vista previa.

Inicia sesión para leer el artículo completo. Cualquier cuenta abre 4 artículos gratuitos al mes; el alumnado y el profesorado leen las páginas de su curso sin límite.

Iniciar sesión