Práctica 4

Traducido del catalán al español - www.onlinedoctranslator.com Modelo de caja

Informática 4º Fech
Nom a
bre

 Elementos blog e inline

Cada elemento HTML representado en la pantalla es una caja, y son de 2 tipos: cajas "blog" y
cajas "online".

Todos los elementos HTML con los que hemos estudiado tienen un tipo de alineamiento por
defecto. Por ejemplo, <h1> y <p> son elementos de nivel de bloque, mientras son <em> y
<strong> son elementos online.

Podemos sustituir el tipo de cuadro por defecto de los elementos HTML con la propiedad CSS
display. Por ejemplo, si queremos hacer que los elementos <strong> fueran elementos blog en
lugar de elementos online, podríamos hacer

HTML CSS
One de los contrastes de los contrastes entre strong {
bloques-level elementos y líneas on-line son background-color: #B2D6FF;
sus banners de margines.<strong>elemento display: block;
</strong >. Inline boxes completamente }
ignoran el top and bottom margins of an
element.

Actividad 1:

Copia el código anterior en Codepen y comprueba y explica la diferencia de aplicar display:

block o display: inline en el elemento strong
  Modelo de caja

El "modelo de caja CSS" es un conjunto de normas que determinan las dimensiones de cada
elemento de una página web. Cada caja (tanto online como en bloque) tiene cuatro
propiedades:

o Contenido(content): texto, imagen u otros contenidos multimedia del elemento.

o Padding: espacio entre el contenido de la caja y su borde.

o Cerca(border): la línea entre el relleno y el margen de la caja.

o Margen(margin): el espacio entre la caja y las cajas vecinas.

Esto es todo lo que un navegador necesita para mostrar la caja de un elemento. Cuando el
nombre de la etiqueta nos da información del tipo de datos del interior de la etiqueta
entonces decimos que es una etiqueta semántica y no un simple contenedor de información
de cualquier tipo. Ejemplos de etiquetas semánticas serían <p>, <title>, <form> , <table> o
<artículo>. Ejemplos de éticas no semáticas son <div>, <span> o <strong>. Inicialmente el html
no separaba los elementos semánticos de los de formato. Actualmente es necesario poner
elementos semánticos de tipo html y elementos CSS para definir el formato.
  Padding

La propiedad padding define el espacio entre el contenido del elemento seleccionado y el borde

HTML CSS
h1{
padding: 50px;
Esto añade 50 píxeles a cada lado del<h1>
}

p{
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px; poner valor de padding a cada lado de un elemento
padding-right: 10px;
}

p{
padding: 20px 10px;} poner valor de padding vertical y hortizontalmente
/* Vertical Horizontal */

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

Permite dar valor al padding superior,

Permite dar valor al padding vertical y horizontal
derecho, inferior e izquierda

Actividad 2.Prueba los modelos anteriores en Codepen. En la sección de html de Codepen ponga
el elemento <h1> Me llamo Cassandra Gonets </h1>. Luego aplique este formato css.
Esto nos muestra una serie de comportamientos muy importantes asociados con cajas tipo
blog y cajas online:

o Las cajas tipo blogsiempre aparecen debajo del elemento de bloque anterior. Éste es
el flujo "natural" o "estático" de un documento HTML cuando lo renderiza un
navegador web.

o La anchura y altura de una caja se pueden definir si la caja es bloque y no se pueden

definir si es inline.

o Si no lo hemos definido, el ancho de una caja bloque se establece automáticamente en

función del ancho del contenedor principal. En este caso, nuestros blogs siempre son
el ancho de la ventana del navegador.

o Si tampoco definimos específicamente la altura, entonces la determina el contenido.

Cuando se reduce el ancho de la ventana del navegador, un elemento bloque con
texto se hace más alto porque el texto se reparte en más líneas y altura de la caja se
ajusta en consecuencia. Lo mismo ocurre si le definimos una anchura demasiado
estrecha.

o El ancho de los cuadros inline se basa en el contenido que contiene, no en el ancho del
elemento contenedor donde están las cajas online.

o Por lo general, los elementos online sólo pueden contener datos y otros elementos
online. No se pueden colocar elementos de blog dentro de los elementos online.

o No se puede dar valores de width, height, margin-top ni margin-bottom a un elemento

inline pero se puede añadir espacio al padding y márgenes izquierdo y derecho de un

elemento online
o También se puede aumentar el valor de padding superior e inferior de un elemento
online pero esta mayor altura no desplazará otros elementos que puedan haber arriba
o abajo, por lo que se puede producir solapamiento.

Actividad 3.

Crea en Codepen estos elementos:

<div> algo de texto</div> <strong>más texto</strong> <strong>más texto</strong>

<strong>más texto</strong> <strong>más texto</strong> <strong> más
texto</strong> <strong>más texto</strong>

Aplica el siguiente CSS:

div {border:solid;}

strong {

border: sólido;
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;
}

Ahora modifica el CSS de <strong> de la siguiente forma:

2.1Pone los márgenes superior e inferior a 100px. ¿Hay algún cambio? ¿Cuál?
2.2Aumenta en 10px los márgenes izquierdo y derecho. ¿Hay algún cambio? ¿Cuál?
2.3Aumenta en 100px el padding izquierdo y derecho. ¿Qué ha pasado? ¿Hay
solapamiento?
2.4Aumenta en 100px el padding superior e inferior. ¿Qué ha pasado?
2.5Pone line-height: 0px; ¿Qué ha pasado?
2.6Finalmente añade estos valores de altura y anchura height:200px;
width: 200px;¿Hay algún cambio? ¿Cuál?
  border (borde)

El borde es una frontera: una línea dibujada en torno al contenido y el padding de un

elemento. La propiedad border requiere una nueva sintaxis. Primero, definimos el ancho del
trazo del borde, después su estilo, seguido de su color.

h1{ Esto indica al navegador que dibuje una línea

padding: 50px; gris continua de grosor 1px de color verde en
border: 1px sólido green; el lado exterior del padding del
} encabezamiento
p{
border-top: 20px;
border -bottom: 20px;
border -left: 10px; Permite dar valor al padding superior, derecho,
border -right: 10px; inferior e izquierda
}

 Margin

Los márgenes definen el espacio fuera del borde del elemento. Es el espacio entre una caja y
sus casillas circundantes. También acepta los mismos formatos que hemos visto en el padding.

p{margin: 20px 0 20px 10px;} Al igual que el padding

p{margin-top: 20px;
margin-bottom: 20px;
margin-left: 10px;
 margin-right: 10px;}

p{margin: 20px 10px;}

/* Vertical Horizontal */

o El padding de una caja tiene un fondo mientras que los márgenes siempre son
transparentes.

o El padding se incluye en el área sensible de ser clicada de un elemento, mientras

que los márgenes no.

o Los márgenes colapsan verticalmente, mientras que el padding no lo hace

 Márgenes verticales de los elementos inline

Actividad 4:

Prueba estos 2 códigos en Codepen y explica la diferencia de resultado

HTML CSS
strong {
One of the starkest contrastes between block-level elements and margin: 50px;
inline ondas is their handling of margins. <strong> elemento border: sólido;
</strong>. Inline boxes completamente ignoran el top and bottom background-color:red;
margins of an element.
}
One de los contrastes de los contrastes entre bloques-level strong {
elementos y líneas on-line son sus banners de padding: 50px;
margines.<strong>elemento border: sólido;
</strong >. Inline boxes completamente ignoran el top and background-color:red;
bottom margins of an element. }

Uno de los contrastes entre los elementos del blog y los online es el tratamiento de los
márgenes. Los cuadros online ignoran por completo los márgenes superior e inferior de un
elemento. No ocurre lo mismo con el padding, aunque la caja nunca hace variar el
posicionamiento vertical de las demás cajas vecinas. Los márgenes horizontales se muestran
como esperábamos.

 Colapso de los márgenes verticales en elementos tipo caja

Otro hecho curioso del modelo de caja CSS es el "colapso del margen vertical". Cuando tenga
dos cuadros con márgenes superior e inferior puestos uno encima del otro, el margen menor
de los 2 se colapsará, en vez de sumarse, tal y como podría esperarse. Sólo se actúa el mayor
margen.
Actividad 5:

En Codepen crea 2 párrafos con texto. Como los párrafos son de tipo blog se pondrán uno
encima del otro. Aplica el siguiente código css a los párrafos:

Bordes sólidos Margen inferior: 10 px;

Padding: 0px Altura del párrafo: 50px
Margen superior: 50px Fondo: verde
1. ¿Qué distancia existe entre el borde superior del 2º paráfrafo y el borde inferior del primer
párrafo? (piensa que la altura de los párrafos es de 50px) Si no hubiera colapso ¿qué
distancia debería haber? ¿Por qué abrimos este resultado?
2. Si ponemos el margen inferior a 50 px ¿habrá algún cambio? ¿Por qué? Compruébalo en el
Codepen.
3. Pone el margen inferior a 80 px. ¿Qué ocurre ahora?
Una forma de evitar el colapso de márgenes es interponer un elemento sin contenido visible
(texto o imágenes) pero con altura no colapsada, entre los 2 párrafos. Por ejemplo:

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

4. Ponlo en el Codepen y explica qué distancia hay ahora entre los bordes del <p> superior e
inferior.