Antes que nada, debes conocer algunos fundamentos de HTML para poder entender cómo el CSS padding vs. margin afecta al formato y al aspecto de tu sitio web. Con el lenguaje de marcado, puedes crear toda una serie de elementos diferentes que acaban materializándose en una presencia web. Estos elementos se dividen en dos grupos: elementos en línea y en bloque.
Los elementos HTML en línea son aquellos que fluyen junto con el texto de tu sitio web y no necesitan un párrafo propio. Los ejemplos típicos son la etiqueta em o la etiqueta b, que garantizan que el contenido entre la etiqueta de apertura y la de cierre del script HTML se muestre en cursiva o en negrita en el navegador web.
A diferencia de los elementos en línea, los elementos padres del bloque requieren su propio párrafo, por lo que te imaginarás que son una especie de caja que ocupa todo el ancho de la pantalla. De manera análoga, evidentemente puedes ajustar el ancho y alto de los elementos del bloque para que la caja se reduzca o amplíe con respecto a la pantalla. Los elementos de los bloques pueden alinearse entre sí, por lo que son un componente esencial para el diseño de un sitio web. Los representantes típicos de esta categoría de elementos HTML son, por ejemplo, los encabezados h1 a h6, así como el contenedor div.