Ejemplo de Cómo Quitar Márgenes Con HTML
Los márgenes en HTML son espacios en blanco que rodean a los elementos, y son utilizados para separar elementos entre sí. Lo que se busca es crear una apariencia más ordenada y agradable. En este artículo aprenderás cómo aplicar márgenes al documento y a los elementos en HTML utilizando CSS.
Contenido del artículo
Márgenes con la etiqueta <body>
En los inicios del HTML, la práctica común era utilizar atributos en la etiqueta <body> como leftmargin, topmargin, rightmargin, etc. Hoy día ya no es una práctica recomendada. Veamos el ejemplo:
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" rightmargin="0">
Lo anterior nos presentará una página con los textos pegados hasta arriba, al lado izquiero, derecho y abajo.
Márgenes con CSS
La forma recomendada para manipular los márgenes es utilizar CSS (Cascading Style Sheets), es la mejor opción para controlar el diseño y la apariencia de los elementos HTML dentro de una página web. Veamos algunos ejemplos
Quitar los márgenes de la página
Para quitar los márgenes de la página completa, se puede aplicar la propiedad "margin" con un valor de 0 en las etiquetas html y body. En el siguiente ejemplo, se eliminan los márgenes de la página:
<html><head><style> html, body { margin: 0; }</style></head><body> <p>Esta página no tiene márgenes.</p></body></html>
Quitar márgenes en los elementos
Para aplicar márgenes de un elemento, se utiliza la propiedad "margin" en CSS. En el siguiente ejemplo, se aplica un margen de 0px en todos los lados del párrafo (arriba, abajo, derecha, izquierda).
<html><head><style> p { margin: 0px; }</style></head><body> <p>Este párrafo tiene un margen de 0px en todos los lados.</p></body></html>
Cambiar márgenes de los elementos
También es posible aplicar márgenes individuales en cada lado del elemento (arriba, abajo, izquierda y derecha). Para ello utilizamos las propiedades: "margin-top", "margin-right", "margin-bottom" y "margin-left" en CSS. En el siguiente ejemplo, se aplican diferentes márgenes en cada lado del párrafo.
<html><head><style> p { margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px; }</style></head><body> <p>Este párrafo tiene márgenes individuales en cada lado.</p></body></html>
Esta propiedad se puede aplicar a cualquier elemento como <div>, <h1>, <h2>, etc.
Quitar el margen superior de un título h1
Para quitar el margen superior de un elemento <h1>, puedes aplicar la propiedad "margin-top" con un valor de 0 en CSS. Ejemplo:
<html><head><style> h1 { margin-top: 0; }</style></head><body> <h1>Sin margen superior</h1> <p>Este es un párrafo de ejemplo.</p></body></html>
Diferentes márgenes en elementos <div> con borde
Vamos a ver un ejemplo donde se aplican diferentes márgenes a varios elementos <div> con bordes, el objetivo es que puedas apreciar la forma en cómo funcionan los bordes.
El primer <div> tiene un margen de 10px en todos los lados, el segundo <div> tiene un margen de 20px en la parte superior e inferior y 40px en la izquierda y derecha, y el tercer <div> tiene márgenes individuales en cada lado. Los bordes ayudan a visualizar la separación entre los elementos <div> y los márgenes aplicados.
<html><head><style> div { border: 2px solid black; width: 100px; height: 100px; }.div1 { margin: 10px; }.div2 { margin: 20px 40px; }.div3 { margin-top: 30px; margin-right: 50px; margin-bottom: 10px; margin-left: 20px; }</style></head><body> <div class="div1">Div 1</div> <div class="div2">Div 2</div> <div class="div3">Div 3</div></body></html>
¿Cómo citar? & Del Moral, M. (s.f.). Ejemplo de Cómo Quitar Márgenes Con HTML.Ejemplo de. Recuperado el 26 de Septiembre de 2023 de https://www.ejemplode.com/17-html/643-ejemplo_de_como_quitar_margenes_con_html.html