-
Cómo hacer espacio entre imágenes en CSS
-
Al insertar imágenes en su página web, el navegador muestra las imágenes una junto a la otra de forma automática. Esta configuración por defecto no es ideal, ya que sus fotos pueden aparecer tan juntos que es difícil distinguirlos. Afortunadamente, Cascading Style Sheets (CSS) le permite crear una regla específicamente para sus imágenes que hace que el espacio que necesita. Utilice el software editor de texto de su ordenador para entrar en el CSS que diseña el diseño de la imagen que prefiera.Instrucciones
1 Inicie el software de editor de texto y abra el documento Web que tiene las imágenes que desea modificar.
2 Introduzca el siguiente código CSS después de la apertura elemento <head> en la parte superior:
<Style type = "text / css">
img {}
</ Style>
La entrada "img {}" crea un estilo que controla las imágenes en su sitio web.
3 Tipo "margen:"; dentro de las llaves e introduzca un valor de píxel (píxeles) para determinar la cantidad de espacio que aparece alrededor de todos los lados de sus imágenes. Por ejemplo:
img {margin: 10px; }
4 Guarde el archivo y previsualizar el documento en un navegador. Realizar cambios en los valores de los píxeles (si es necesario) y luego subir el archivo a su servidor web para publicar su trabajo.
Consejos y advertencias
- Usted tiene la opción de especificar diferentes valores de margen para una zona determinada imagen, como la parte superior o inferior. Enter "margin-top", "margin-bottom", "margen derecha" y "margin-left", a continuación, escriba un tamaño de píxel preferida después de cada atributo, de la siguiente manera:
- img {margin-top: 10px; margin-bottom: 8 píxeles; margin-left: 5px; margin-right: 7px; }
- La regla CSS se aplica automáticamente a cada imagen se codifican en su página.
