Informàtica 4t Pràctica 4 Model de caixa

Data
Nom

 Elements bloc i inline

Cada element HTML representat a la pantalla és una caixa, i són de 2 tipus: caixes "bloc" i
caixes "en línia".

Tots els elements HTML amb els que hem estudiat tenen un tipus d’aliniament per
defecte. Per exemple, <h1> i  <p> són elements de nivell de bloc, mentre són <em> i <strong>
són elements en línia. 

Podem substituir el tipus de quadre per defecte dels elements HTML amb la 
propietat CSS display . Per exemple, si volem fer que els elements  <strong> fossin elements
bloc en comptes d'elements en línia, podríem fer

One of the starkest contrasts between block- strong {

level elements and inline ones is their background-color: #B2D6FF;
handling of margins. <strong> element display: block;
</strong >. Inline boxes completely }
ignore the top and bottom margins of an
element.

Activitat 1:

Copia el codi anterior a Codepen i comprova i explica la diferència d’aplicar display: block o
display: inline a l’element strong
  Model de caixa

El "model de caixa CSS" és un conjunt de normes que determinen les dimensions de cada
element d'una pàgina web. Cada caixa (tant en línia com en bloc) té quatre propietats:

o Contingut  (content): text, imatge o un altres continguts multimèdia de l'element.

o Padding : espai entre el contingut de la caixa i la seva vora.

o Vora (border) : la línia entre el farciment i el marge de la caixa.

o Marge (margin) : l'espai entre la caixa i les caixes veïnes.

Això és tot el que un navegador necessita per mostrar la caixa d'un element. Quan el nom de
l’etiqueta ens dona informació del tipus de dades de l¡interior de l’etiqueta aeleshores diem
que és una etiqueta semàntica i no un simple contenidor d’informació de qualsevol tipus.
Exemples d’etiquetes semàntiques serien <p>, <title>, <form> , <table> o <article>. Exemples
d’etiques no semàtiques són <div>, <span> o <strong>. Inicialment l’html no separava el
elements semàntics dels de format. Actualment cal posar elelemts semàntics de tipus html i
elements CSS per definir el format.
  Padding

La propietat padding defineix l’espai entre el contingut de l'element seleccionat i la vora.

h1 {
padding: 50px;
Això afegeix 50 píxels a cada costat de l'<h1>
}

p{
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px; posar valor de padding a cada costat d'un element
padding-right: 10px;
}

p{
padding: 20px 10px;} posar valor de padding vertical i hortizontalment
/* Vertical Horizontal */

p{ p{
padding: 20px 10px; padding: 20px 0 20px 10px;
} }

Permet donar valor al padding vertical i Permet donar valor al padding superior,
horitzontal dret, inferior i esquerra

Activitat 2. Prova el models anteriors a Codepen

Això ens mostra una série de comportaments molt importants associats amb caixes tipus bloc i
caixes en línia:

o Les caixes tipus bloc sempre apareixen a sota de l'element de bloc anterior. Aquest és

el flux "natural" o "estàtic" d'un document HTML quan el renderitza un navegador
web.

o L’amplada i alçada d’una caixa es poden definir si la caixa és bloc i no es poden definir
si és inline.

o Si no l’hem definit, l'amplada d’una caixa bloc s'estableix automàticament en funció

de l'amplada del contenidor principal. En aquest cas, els nostres blocs sempre són
l'amplada de la finestra del navegador.

o Si tampoc definim específicament l'alçada, aleshores la determina el contingut. Quan

es redueix l’amplada de la finestra del navegador un element bloc amb text es fa més
alt perquè el text es reparteix en més línies i’alçada de la caixa s'ajusta en
conseqüència. Passa el mateix si li definim una amplada massa estreta.

o L' amplada dels quadres inline es basa en el contingut que conté, no en l'amplada de

l'element contenidor on són les caixes en línia.

o En general, els elements en línia només poden contenir dades i altres elements en
línia. No es poden posar elements de bloc dins dels elements en línia.

o No es pot donar valors de width, height, margin-top ni margin-bottom a un element

inline però es pot afegir espai al padding i marges esquerre i dret d’un element en
línia

o També es pot augmentar el valor de padding superior i inferior d'un element en línia

però aquesta major alçada no desplaçarà altres elements que puguin haver a dalt o
abaix, de manera que es pot produir solapament.

Activitat 3.
 Crea a Codepen aquests elements:

<div> una mica de text</div> <strong>més text</strong> <strong>més text</strong>

<strong>més text</strong> <strong>més text</strong> <strong>més text</strong>
<strong>més text</strong>

Aplica el següent CSS:

div {border:solid;}

strong {

border: solid;
margin-top: 0px;
margin-bottom: 0px;
margin-right: 20px;
margin-left: 30px;
padding-top: 40px;
padding-bottom: 30px;
padding-right: 70px;
padding-left: 70px;
background: red;
line-height:150px;
}

Ara modifica el CSS de <strong> de la següent forma:

2.1 Posa els marges superior i inferior a 100px. Hi ha cap canvi? Quin?
2.2 Augmenta en 10px els marges esquerre i dret. Hi ha cap canvi? Quin?
2.3 Augmenta en 100px el padding esquerre i dret. Què ha passat? Hi ha solapament?
2.4 Augmenta en 100px el padding superior i inferior. Què ha passat?
2.5 Posa line-height: 0px; Què ha passat?
2.6 Finalment afegeix aquests valors d’alçada i amplada height:200px;
width: 200px; Hi ha cap canvi? Quin?

 border (vora)
La vora és una frontera: una línia dibuixada al voltant del contingut i el padding d'un element. 
La propietat border requereix una nova sintaxi. Primer, definim l'amplada del traç de la vora,
després el seu estil, seguit del seu color.

h1 { Això indica al navegador que dibuixi una línia

padding: 50px; grisa contínua de gruix 1px de color verd a la
border: 1px solid green; banda exterior del padding de
} l’encapçalament
p{
border-top: 20px;
border -bottom: 20px;
border -left: 10px; Permet donar valor al padding superior, dret,
border -right: 10px; inferior i esquerra
}

 Margin

Els marges defineixen l'espai fora de la vora de l'element. És l'espai entre una caixa i les seves
caselles circumdants. També accepta els mateixos formats que hem vist al padding.

p {margin: 20px 0 20px 10px;}

p {margin -top: 20px;

margin -bottom: 20px;
margin -left: 10px; Igual que el padding
margin -right: 10px;}

p {margin: 20px 10px;}

/* Vertical Horizontal */

o El padding d'una caixa té un fons, mentre que els marges sempre són transparents.
 o El padding s'inclou dins l'àrea sensible de ser clicada d'un element, mentre que els
marges no.

o Els marges col·lapsen verticalment, mentre que el padding no ho fa

 Marges verticals dels elements inline

Activitat 4:

Prova aquests 2 codis a Codepen i explica la diferència de resultat

strong {
One of the starkest contrasts between block-level elements and margin: 50px;
inline ones is their handling of margins. <strong> element border: solid;
</strong>. Inline boxes completely ignore the top and bottom background-color:red;
margins of an element.
}
strong {
One of the starkest contrasts between block-level elements and
padding: 50px;
inline ones is their handling of margins. <strong> element
border: solid;
</strong >. Inline boxes completely ignore the top and bottom
margins of an element. background-color:red;
}

Un dels contrastos entre els elements del bloc i els en línia és el tractament dels marges. Els
quadres en línia ignoren per complet els marges superior i inferior d'un element.  No passa el
mateix amb el padding, encara que la caixa mai fa variar el posicionament vertical de les altres
caixes veïnes. Els marges horitzontals es mostren com esperàvem.

 Col·lapse dels marges verticals en elements tipus caixa

Un altre fet curiós del model de caixa CSS és el "col·lapse del marge vertical". Quan tingueu dos
quadres amb marges superior i inferior posats un a sobre de l'altre, el marge menor dels 2 es
colapsarà, en comptes de sumar-se, tal com es podria esperar. Només es actua el marge més
gran.

Activitat 4:

Al Codepen crea 2 paràgrafs amb text. Com els paràgrafs són de tipus bloc es posaran un a
sobre de l’altre. Aplica el següent codi css als paràgrafs:

Vores sólides Marge inferior: 10 px;

Padding: 0px Alçada del paràgraf: 50px
Marge superior: 50px Fons: verd
1. Quina distància hi ha entre la vora superior del 2n paràfraf i la vora inferior del primer
paràgraf? (pensa que l’alçada dels paràgrafs és de 50px) Si no hi hagués col·lapse quina
distància hi hauria d’haver? Per què obrenim aquest resultat?
2. Si posem el marge inferior a 50 px hi haurà cap canvi? Per què? Comprova-ho al Codepen.
3. Posa el marge inferior a 80 px. Què passa ara?
Una manera d’evitar el colapse de marges és interposar un element sense contingut visible
(text o imatges) però amb alçada no colapsada, entre els 2 paràgrafs. Per exemple:

<div style='padding-top: 1px'></div>

4. Posa’l al Codepen i explica quina distància hi ha ara ente les vores del <p> superior i
inferior.