15. Rado i frontera

El quadre on es troba el contingut (text o imatges) pot tenir un avantatge, un marge fins a la vora anomenat encoixinat i un marge amb els altres elements anomenats marge.

A la figura següent podeu veure cadascun d’aquests paràmetres.

Modelo de caja en CSS con padding, border y margin

En aquest exercici, es modificaran els paràmetres de rellotge i frontera de diferents paràgrafs.

Referències

Model CSS Box

Padding CSS

CSS Border

CSS Amplada de la frontera

CSS Border Color

CSS Border Sides

CSS Border Shorthand

CSS Bordes arrodonides

Exercir

Fitxer ** CSS-Padding-Border.html **

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!doctype html>
<html>
<head>
   <title> Padding y border </title>
   <link rel="stylesheet" type="text/css"
         href="css-padding-border.css" >

</head>

<body>

   <h1> Padding y border </h1>

   <p class="estrecho"> Párrafo de ejemplo con padding de 20 pixel
   y sin borde abajo (bottom).</p>

   <p class="ancho"> Párrafo de ejemplo con padding de 80 pixel.</p>

   <p class="lateral"> Párrafo de ejemplo con padding a la izquierda
   y a la derecha de 50 pixel y borde punteado. </p>

</body>
</html>

Fitxer ** CSS-Padding-Border.CSS **

Código del fichero css-padding-border.css

Resultat

Resultado de visualizar los ficheros css-padding-border.html y css-padding-border.css en un navegador