Todos los navegadores actuales ofrecen herramientas al desarrollador, estas nos son muy útiles y ayudan al diseño de la página, hay que tener en cuenta que nuestra página se va a mostrar en dispositivos con diferente tamaño de pantallas y resoluciones, nuestra página tiene que adaptarse y verse bien en cualquier dispositivo, a esto se le llama “responsive”, cuando utilizamos el término “responsive” (adaptable), nos referimos principalmente a “responsive design” (diseño web adaptable). Esto significa hacer que un sitio web sea accesible y adaptable en todos los dispositivos: pc, tabletas, smartphones, etc.
Muchos desarrolladores utilizan el término “Mobile first”, que viene a decir que primero nos centraremos en el diseño para dispositivos móviles y luego lo iremos adaptando para escritorio.
Para entrar en el modo desarrollador simplemente tenemos que hacer clic con el botón derecho sobre nuestra página y seleccionar inspeccionar.
Con esto se nos abre la consola de desarrollador.
Yo estoy utilizando el navegador Firefox Developer Edition si utilizas otro navegador la presentación puede ser algo diferente.
En la parte izquierda de la consola de desarrollo nos situamos en la pestaña Inspector, aquí vemos el código html de nuestra página.
Pinchamos en la etiqueta <html> y observamos qué en la parte superior de la pantalla, donde visualizamos nuestra página se nos sombrea la zona que ocupa la etiqueta <html>
<html> es la etiqueta principal que contiene todos los elementos de la página, por eso nos sombrea todo el espacio.
En la parte derecha de la consola nos aparece.
Pinchamos en la pestaña disposición y vemos un apartado que pone Modelo de caja, aquí vemos varias cosas.
una zona azul en el centro que pone 1280x300 estos son los pixeles que de nuestro <html>
una zona violeta que llama padding y tiene por valor 0
un border que tiene por valor 0
y un margin que tiene por valor 0
estos valores los pone por defecto, el tamaño en pixeles depende de la pantalla en la que estamos trabajando.
¿Qué es el padding?
El padding nos crea un espacio entre el contenido de un elemento y los bordes de su contenedor, veámoslo con un ejemplo, el texto de nuestro primer párrafo se encuentra dentro de un contenedor que hemos marcado con un borde y vemos que el texto esta completamente pegado al borde.
Pues bien vamos a separarlo 20px del borde, para ello tenemos que definir un estilo para la etiqueta <p> que le aplique un padding de 20 px
Este estilo va afectar a todas las etiquetas <p> que tenga nuestra página, si ahora actualizamos la página veremos
Y veo lo siguiente.
Aquí definimos el ancho de 400px, el borde de 1px y el margen izquierdo de 100px
Y aquí aplicamos un padding de 20px a todas las etiquetas <p>
Si nos interesa que las etiquetas <p> tengan padding diferente podemos incluir el padding en el estilo “.izquierda
Este sería el resultado, el padding solo le afecta al primer párrafo.
No hay comentarios:
Publicar un comentario