Curso de css. ¿Cómo crear marcos con Css?. Propiedades, margin y padding.

Para crear bordes o enmarcar un elemento, por ejemplo un párrafo, utilizamos la propiedad border.

Hay varias formas de escribir su síntesis:

De esta manera, en una misma linea decimos que queremos un borde de 1px de ancho, tipo solid (solido, ya veremos que los exploradores pueden representar hasta 8 tipos diferentes de borde) y de color black (negro).

otra forma sería separar cada propiedad de border:

De esta forma se mantiene cada cosa por separado. Quizás resulte mas organizado, pero es trabajar en valde. Personalmente me quedo con la primera opción.

Los distintos estilos de borde son:

Podeis probarlos en la hoja de estilo modificando el atributo border donde pone «solid», por cada distinto tipo. Para probar este atributo, volvamos a nuestra página web creada y en el primer párrafo vamos a crear un borde. Para ello insertaremos en la primera etiqueta o de entrada, lo siguiente:

<p class=»marcoparraf»>

Y en la hoja de estilo añadiriamos:

El resultado sería el siguiente:

Lo primero que apreciamos es que el marco se ha creado, pero demasiado pegado al texto. Bueno, hay dos maneras de subsanar esto, la primera es aplicando padding, que es otro atributo o propiedad el cual utilizaremos mucho, sobre todo junto con margin, ya que estan extrechamente ligadas. De momento quedaros con este ejemplo: Imaginaros que cojo un muelle grande, tipo amortiguador de coche y lo cojo de ambos lados haciendo presión hacia dentro con mis manos. Si antes tenia las manos a 40cm por ejemplo, al aplastar el muelle, he reducido esa distancia, es decir la he comprimido un poco hasta 30cm de distancia la una de la otra por ejemplo, por tanto he dejado un espacio imaginario de la distancia a la que antes estaban las manos, menos la real de ahora de 10cm, en concreto 5cm por cada lado. Pues esos 5cm seria el padding, por eso he dicho antes que podemos separar el texto del marco, si aplicamos un poco de padding. Por supuesto cambiando el tipo de medida, que serian pixeles en vez de centimetros. Hagamos la prueba:

Ir a la hoja de estilo y poner debajo de la propiedad border, lo siguiente:

Y vemos como queda ahora:

Esto ya está bastante mas presentable. Si os fijais el marco tiene la misma anchura que antes de aplicar padding, lo que ha variado es la altura. Si comprimes de ancho, se compensa de alto y viceversa.

Fijaros en la última palabra del párrafo «aprendido» a donde llega la última letra la «o» en el anterior marco y comparar después de aplicar padding, en este último marco. No hay duda el texto ha encojido de ancho.

la propiedad padding, no la aplicamos solo a la izquierda y a la derecha, sino en los cuatro lados que conforman el marco. Si ponemos solo una cifra de pixeles después de los dos
puntos de padding, como antes hicimos, (padding:10px;) esa distancia actua en los cuatro lados, es decir presionariamos el texto 10px por arriba, 10px por la derecha, 10px abajo y 10px por la izquierda. Además es precisamente ese orden el que sigue la propiedad padding y tambien otras propiedades, por ejemplo margin. ARRIBA-DERECHA-ABAJO-IZQUIERDA.

por lo tanto y de acuerdo a esto, podriamos aplicar padding en cualquier lado que quisiesemos. Y bastaría poner un «0» ó 0px, para dejar cualquier lado igual. Por ejemplo si escribimos estos valores:

padding:0 20px 0 0; es lo mismo que decir empuja del lado derecho 20px y deja el resto igual. Hagamos la prueba modificar en la hoja de estilo el valor de padding que pusimos anteriormente y poner estos valores nuevos:

el resultado es:

Espero que con esta explicación el tema del padding que es fuente de numerosos quebraderos de cabeza para muchos, quede bien claro.

Aprovechando que esta fresca la explicación del padding, os comentaré que es el margin.
Si os acordais con el ejemplo del muelle, la presión o fuerza era hacia dentro, teniendo en cuenta un marco imaginario situado en la posición inicial de nuestras manos, es decir toda la acción o padding se generaba dentro del mismo marco, pues en el caso del margin, las distancias que cuentan, son las exteriores al marco, son dos espacios diferentes. Para que quede mas claro, imaginaros un coche en un garaje, el espacio del habitáculo o interior sería campo de acción del padding y el espacio de fuera del coche, es decir de puertas para fuera seria el margin. conclusión, para que haya margin debe haber al menos dos marcos uno dentro de otro o dos puntos, ya que según las leyes físicas o matemáticas, la distancia se
calcula entre dos puntos con una sola referencia es imposible.

Por si no ha quedado del todo claro, cosa que no me extrañaría, por lo mal que me explico a veces, jejeje mejor os pongo un ejemplo:

Para ello os explicaré antes una etiqueta que salió en el curso de html, la etiqueta <div></div>, y en aquel entonces os dije que se explicaría en el curso de css. Así ya de paso, matamos dos pájaros de un tiro, ya que la otra forma de corregir el poco espacio que nos dejo el marco, antes de aplicar padding era esta, aplicando un elemento de bloque <div></div>.

bueno, lo primero vamos a cojer el primer ejemplo de marco que hicimos antes de aplicar padding, (ya sabeis,el que tiene el texto pegado a las paredes.) y vamos a adjuntar lo siguiente:

<div
class=»marcocondiv»> justo antes de la etiqueta del párrafo enmarcado <div class=»marcoparraf»> y al ser el elemento div un block-level, pondremos la etiqueta de cierre </div>,al final del bloque de párrafo, detras de la etiqueta de cierre </p> Y en la hoja de estilo añadiremos la clase marcocondiv que hemos creado con estas propiedades:

Vamos a explicar que ha sucedido aquí. Como podeís apreciar, se ha creado otro marco, en el cual el texto que enmarca tiene margen por arriba y por abajo apenas lo tiene en el lado izquierdo o derecho. Esto se debe a que el elemento div, no hace nada por si solo, necesita para funcionar, enmarcar elementos ya sean de marcar párrafos (p), títulos (h1,h2…),etc adaptandose al margen natural que por defecto tienen dichos elementos. Por ejemplo, sabemos que los elementos de párrafo generan un salto de linea anterior y posterior al texto enmarcado, de ahí que el marco que hemos creado con el elemento de bloque «div» diste unos pixeles por arriba y por abajo y se ajuste por los lados izquierdo y derecho del texto.

Una vez que tenemos los dos marcos uno dentro del otro, podemos hacer algunas pruebas, para afianzar mejor el concepto de margin y padding, por ejemplo si añadis en la hoja de estilo, el siguiente margen:

Vereis como se encuadra el marco interior,respecto al exterior, dejando la misma distancia por todos los lados:

Al tratarse de selectores o indicadores de clase los que hemos utilizado, estos mismos nos valdrían para enmarcar más elementos que hubiese en la misma página, para ello debemos modificar solo el código fuente de nuestra página. Aunque siempre conviene crear clases o selectores distintos para cada tipo de elemento, buscamos como finalidad demostrar la teoría de los selectores de clases.
Por ejemplo probaremos a enmarcar las listas, para ello escribiremos nuestra etiqueta de bloque <div class=»marcocondiv»> antes de la etiqueta de comienzo de lista <ul>, la etiqueta de cierre del div </div> la situaremos después de la etiqueta de cierre de lista </ul> y a la etiqueta de entrada <ul> la colocaremos nuestro selector de clase utilizado anteriormente con el párrafo,
quedando así:
<ul class=»marcoparraf»>, veamos el resultado en la página:

Como vemos, los selectores de clase actuan en cualquier elemento de la página, sin embargo en el caso de las listas, no nos encuadra del todo bién, ya que las listas están formadas por varios tipos de elementos, el de abertura y cierre, y luego el que indica cada apartado o orden de la lista que en ambas se llama elementos <li>.
Aunque hay varias maneras de arreglar esto, iremos a la que en mi humilde opinión es la más apropiada. Dijimos anteriormente que los selectores de clase «.class» ó los identificadores únicos «id» podian actuar sin necesidad de mentar al elemento que identifican, es decir no haría falta anteponer en el código css el nombre del elemento, sin embargo cuando un identificador sirve para marcar un elemento como una lista, que a su vez esta formada por otros tipos de elementos, si conviene anteponerlos, de esta manera no habrá sorpresas o resultados inesperados en nuestras presentaciones web. Una vez dicho esto, cambiaremos nuestra hoja de estilo e incluiremos el siguiente código:

De esta forma, apuntamos a los elementos html de forma más precisa. Veamos ahora el resultado en el navegador:

Viene muy a cuento explicar un poco como funciona la herencia en una hoja de estilo css. Para ello utilizaremos el código css que ya hemos creado, en el cual tenemos varios selectores de clase. Uno de ellos actua en tres elementos, un párrafo, una lista desordenada y una lista ordenada.

Os preguntareis quizás, ¿Porque he nombrado esos tres elementos con el mismo nombre de clase, si luego antepongo el nombre del elemento, delante del nombre de clase y encima repito las mismas o parecidas propiedades en cada uno? .La respuesta es muy sencilla, estos elementos, pueden tener propiedades de estilo o css, que son comunes a todos ellos y a su vez, podemos asignar de forma individual a cada elemento propiedades que no compartan con el resto de elementos. Veamoslo en el código, así quedará mas claro. Añadiré a la hoja de estilo lo siguiente:

Veamos el resultado en nuestra página de este cambio en la hoja de estilo:

Ha simple vista se puede observar que es la misma página, no ha variado y es lógico, ya que las propiedades se siguen aplicando. Lo único que hemos hecho es reducir el código css, juntando propiedades comunes en los elementos.

¿Que pasa si quiero cambiar en algún elemento una de las propiedades que hemos puesto en el bloque añadido?. Respuesta: Solo tendriamos que colocarla en el bloque correspondiente del elemento que quisiesemos alterar. De esta manera:

Hemos cambiado la propiedad de borde de la lista ordenada y este es el resultado:

Hemos cambiado el borde de la lista ordenada. Conclusión: Si no hay propiedades repetidas, podemos controlar el estilo de esa propiedad desde un único selector de clase común a varios elementos, pero si alguna propiedad se repite o queremos modificarla individualmente en algún elemento, siempre prevalecerá la propiedad situada más abajo en el fichero de hoja de estilo. Si ahora volvemos a retocar nuestra hoja de estilo y cojemos el bloque añadido al principio, colocandolo al final de esta manera:

Este será el resultado:

Nuevamente vuelve a cambiar el borde de la lista ordenada.