CSS PLODDIN VS. Margen

Dentro de HTML, necesitamos CSS para diseñar páginas web de estilo dinámico o estático. CSS Styling proporciona a nuestra página una vista estética. La estética de cualquier página web depende en gran medida de los márgenes y los modos utilizados en el estilo CSS. El relleno se refiere al espacio dado por una propiedad de relleno a cualquier elemento específico a su borde. Mientras que el margen se refiere al espacio entre el borde de un elemento sobre el borde del otro elemento o la parte superior de la página, la parte inferior de la página, la página izquierda y la página derecha. Si no sabe la diferencia entre la propiedad de margen y la propiedad de relleno de CSS en HTML, entonces este artículo le ayudará mucho para obtener conocimientos básicos.

Ejemplo # 01:

Comencemos con el primer ejemplo de usar los ejemplos HTML para explicar la diferencia entre la propiedad de margen y la propiedad de relleno. Primero veremos el uso de la propiedad de margen. Por lo tanto, necesitamos formar un nuevo archivo HTML con la extensión "HTML". Tenemos que abrirlo dentro de cualquier herramienta de programación como Visual Studio Code. Hemos comenzado el código HTML con la etiqueta "HTML" que terminará en el último de todas las etiquetas. Después del inicio de la etiqueta HTML, hemos estado iniciando la etiqueta de la cabeza para poner las otras etiquetas relacionadas dentro de ella.

Hemos agregado la etiqueta de título dentro de ella para crear un nuevo título para nuestra página web HTML (I.mi., Margen.) Después de la etiqueta de título, hemos agregado la etiqueta "Estilo" dentro de la etiqueta de cabeza de este archivo HTML que se ha utilizado para diseñar la página web HTML. Tendremos una apariencia de la etiqueta de estilo después de la elaboración de una etiqueta de cuerpo. Hemos estado usando la etiqueta "cuerpo" después de que el título de la cabeza se haya cerrado. La etiqueta del cuerpo contiene 2 etiquetas de encabezado para el "primer" encabezado más grande (yo.mi. H1.) Estos encabezados contienen diferentes títulos dentro de ellos como se muestra a continuación. Hemos especificado dos clases diferentes para los encabezados por separado para P1 y P2. Las clases P1 y P2 se utilizarán para diseñar el primer y segundo encabezado respectivamente en diferentes formatos de estilo.

La etiqueta del cuerpo junto con la etiqueta HTML principal se cerró aquí como puede ver en la imagen del código de Visual Studio. Hemos usado las clases P1 y P2 aquí para diseñar ambos encabezados por separado. Hemos estado utilizando la propiedad del borde para agregar el borde azul sólido de 2 píxeles alrededor de ambos encabezados. La propiedad de margen se ha utilizado aquí para agregar márgenes de 100 píxeles para encabezar 1 desde todos sus lados y para agregar márgenes de 50 píxeles para dirigir 2 desde todos sus lados. El código para la página HTML se ha completado para mostrar el uso de la propiedad de margen. Guardémoslo primero y luego lo ejecutemos en un navegador. Puede seleccionar cualquier navegador de su elección (yo.mi., Chrome, Mozilla, Opera, y etc.)

Después de ejecutar este archivo directamente en el navegador Google Chrome, tenemos el siguiente resultado. Mostró los dos encabezados de tamaño "1" en la pantalla de la página web que tiene un borde sólido azul. Como hemos aplicado la propiedad de margen en ambos encabezados, por lo tanto, el primer borde de encabezado se ha ubicado a 100 píxeles lejos de su página superior, abajo, izquierda y derecha. Además, el segundo encabezado es de 50 píxeles lejos de su izquierda, derecha, inferior y superior (en relación con el encabezado 1). Así es como un margen puede hacer un espacio entre el borde de un borde de un elemento a otro.

Actualicemos un poco el mismo código HTML para proporcionar una apariencia diversa a la página HTML. Hemos estado utilizando el mismo archivo con el título "Margen" como se muestra a continuación. La etiqueta de estilo se ha iniciado después del final de una etiqueta de título. Hemos estado utilizando la Clase P1 para encabezar 1 y P2 para encabezar 2. Dentro del Padmargin.Archivo HTML, hemos estado utilizando ambas clases P1 y P2 en su estilo. Hemos asignado el mismo valor de un borde azul sólido para encabezados que en la ilustración anterior. Después de esto, hemos especificado la propiedad del margen superior y el margen inferior para el primer encabezado del tamaño 1 y le dio a ambas propiedades un valor de 50 píxeles. Después de eso, hemos estado especificando el margen izquierdo y el espacio del margen derecho de 30 píxeles al encabezado 2 de tamaño "1". Esto significa que habrá menos espacio a la izquierda y a la derecha de un encabezado en comparación con los márgenes superior e inferior. Guardemos este código para ejecutarse.

Después de ejecutar el archivo HTML en Visual Studio y abrirlo en el navegador Chrome, se ha mostrado el resultado. El primer encabezado contiene el margen de 50 píxeles desde su parte superior e inferior, mientras que el segundo encabezado contiene el margen del 30 por ciento izquierdo y derecho del 30 por ciento en relación con esta página y el encabezado anterior. Así es como se puede aplicar el margen a diferentes etiquetas.

Ejemplo # 02:

Estaremos mirando el relleno en comparación con los márgenes. Hemos estado utilizando los dos encabezados de tamaño 1 dentro de la etiqueta del cuerpo de este archivo comenzando con sus nombres de clase especificados, P1 y P2. Antes del uso de la etiqueta del cuerpo, usaremos la etiqueta de cabeza en este archivo HTML. Esta etiqueta contiene la etiqueta de título y la etiqueta de estilo en ella. Se ha dado la etiqueta del título para nombrar la página HTML como margen. La etiqueta de estilo se usa para aplicar CSS a los elementos HTML. Hemos aplicado el borde azul de 2 píxeles a los dos encabezados en la etiqueta del cuerpo. Además, hemos aplicado el margen del 10 por ciento a todos los lados de un encabezado que tiene una clase P1, mientras que el 10 por ciento de acolchado al segundo encabezado que contiene la clase P2. Lo hemos hecho hasta ahora para verificar la diferencia entre el margen y las actualizaciones de relleno en los encabezados por separado en el mismo archivo.

Después de guardar este código HTML, lo hemos estado ejecutando en el código de Visual Studio. Este archivo se ejecutará en el navegador Google Chrome. Para ver el resultado, tenemos la salida a continuación. La diferencia entre la propiedad de margen y la propiedad de relleno de CSS ha sido clara. El primer encabezado contiene el margen del 10 por ciento de su borde al resto de su página. Mientras que el relleno recibe un 10 por ciento de espacio entre el encabezado y su borde.

Conclusión:

Hemos explicado la diferencia entre el margen y las propiedades de relleno del estilo CSS en HTML. Demuestra que el relleno está entre el borde y el elemento, mientras que el margen está entre el borde y el resto de la página. El primer ejemplo ha sido demostrar el uso de márgenes muy evidentemente, mientras que el último ejemplo ha mostrado la diferencia en el relleno sobre los márgenes.