Un margen de lenguaje de marcado de hipertexto (HTML) es una propiedad que determina el espaciado de los elementos exteriores. Se puede utilizar en contexto con el relleno, el espacio dentro de los elementos, para organizar objetos visualmente. Los márgenes pueden ser necesarios para facilitar la lectura y con fines estéticos. Cuando los elementos están muy juntos, puede dar a un sitio web un aspecto ajetreado que puede resultar desagradable para los usuarios. El espaciado correcto con un margen HTML crea una apariencia más equilibrada y uniforme que sigue siendo visualmente interesante, pero no abrumadora.
Cuando un desarrollador establece el margen HTML, puede tomar hasta cuatro valores. Si se da un solo valor, el navegador asumirá que los márgenes alrededor del objeto deben ser los mismos en todos los lados. Para dos valores, utilizará el primero para la parte superior e inferior y el segundo para la izquierda y la derecha. Tres valores delinean el margen superior, las medidas a los lados y la parte inferior. En los casos en los que se definen los cuatro, el navegador establecerá la parte superior, izquierda, derecha e inferior según se especifique.
Cada margen HTML proporciona un espacio visual alrededor del exterior de un elemento. En un ejemplo clásico, un diseñador web puede tener una barra de navegación en la parte superior de una página. Sin márgenes, el siguiente elemento, como un cuadro con contenido, se toparía inmediatamente con la barra de navegación. Esto no se vería muy agradable y también podría dificultar el uso del sitio por parte de los usuarios. Un margen HTML podría proporcionar espacio alrededor del contenido, creando espacio entre el menú y el contenido para separarlos visualmente.
Los diseñadores pueden establecer un margen HTML como un porcentaje o en un valor como em o píxeles. La mejor opción puede depender de las preferencias del diseñador y del aspecto general del sitio. Es importante utilizar medidas consistentes en el diseño. Si los márgenes se dan en porcentajes, por ejemplo, también debería utilizarse el relleno para evitar conflictos.
Otra consideración pueden ser los cambios en el tamaño de la pantalla o la visualización, que pueden ocurrir en dispositivos móviles o computadoras donde los usuarios amplían el contenido para mejorar la legibilidad. Si el diseño no es flexible, el contenido puede salirse de los contenedores, salirse de la página o no ampliarse correctamente. Esto puede dificultar la lectura del sitio y, en algunos casos, puede romper el contenido para que los usuarios no puedan acceder a él en absoluto. En las pruebas, los diseñadores pueden explorar varios navegadores diferentes y experimentar con el aumento y la reducción para ver qué sucede con la pantalla.