Propiedad CSS Rading-Left

Si alguna vez ha sido estudiante de una programación web, debe haber probado los códigos HTML y CSS. HTML es el lenguaje de marcado de hipertexto utilizado para proporcionar el aspecto estático a las páginas web. Mientras que CSS significa Hoja de estilo en cascada para proporcionar el aspecto estético y la sensación de la página web. El formato CSS le permite agregar una apariencia diferente a la página web, yo.mi. Agregar registros, acolchar las propiedades izquierda o derecha, agregar el color de fondo, dividir la página en secciones y muchos más. Dentro de este tutorial, discutiremos sobre el uso de la opción CSS Padding-Left en el código de estilo CSS, I, I.mi. probablemente moviendo cualquier dato a la izquierda.

Ejemplo #01:

Comencemos con el primer ejemplo de usar la propiedad de remo-izquierda dentro del CSS de un archivo HTML. Para esto, debe crear un nuevo archivo de bloc de notas "Pading-izquierda" con el ".Extensión HTML "al final. Este archivo se puede usar dentro del bloc de notas o en cualquier herramienta de idioma como Visual Studio Code, como lo que hicimos en la siguiente imagen. Comenzamos este archivo de código HTML con la etiqueta estándar HTML "", seguido de la etiqueta de cabeza.

La etiqueta de la cabeza también puede contener la etiqueta de título. Por el momento, evitamos el uso de la etiqueta del título. Dentro de la etiqueta de cabeza, usamos la etiqueta de estilo para usar el estilo CSS en el archivo HTML. La etiqueta del cuerpo sigue las etiquetas de la cabeza que comienzan desde el encabezado 1 hasta el encabezado 6. Dentro de la apertura de los encabezados, usamos la clase "PG" como identificador para usar la etiqueta de estilo. Dentro de la etiqueta de estilo, usamos el objeto de clase "PG" para cada encabezado para el estilo. Dentro de los soportes rizados, utilizamos la propiedad de la izquierda de acolchado de CSS y la establecemos en 100 píxeles que quedan desde el inicio de la línea. Esto significa que nuestros encabezados se colocan a 100 píxeles lejos del inicio de la línea en lugar de colocarse en el inicio de la línea. El estilo y la etiqueta de la cabeza se completan aquí.

Después de guardar el código HTML anterior, comenzamos a depurarlo. Como este archivo contiene el ".Extensión HTML ”, se abre directamente dentro del navegador predeterminado que seleccionó en la primera ejecución. La siguiente salida se muestra en la página del navegador que contiene un total de 6 encabezados colocados a la distancia de 100 píxeles desde la izquierda al comienzo de cada línea. Si eliminamos el relleno izquierdo de la etiqueta de estilo, los encabezados comienzan desde el inicio de una línea.

Ejemplo #02:

Volvamos al código HTML y actualicemos un poco como se muestra en lo siguiente. Agregamos un solo encabezado "H1" en el cuerpo siguiendo las etiquetas "Div". Las etiquetas "div" se utilizan para dividir la página en secciones. La primera etiqueta "div" se instancia con la etiqueta "id = div" y la etiqueta "div" interna dentro de ella contiene la clase "greydiv" para distinguirlo. Esta etiqueta "div" contiene una oración simple que indica que esta sección "div" se coloca a 500 píxeles de la izquierda. Ahora, dentro de la etiqueta de estilo de la etiqueta "Cabeza", establecemos la propiedad de color de fondo "Pink" para la página web y colocamos el encabezado 1 a la distancia de 500 píxeles desde su punto de partida utilizando la opción de almohadilla izquierda. Después de eso, agregamos la altura y el color de fondo para la primera sección "Div" de toda esta página. La sección interna "Div" utilizada por la clase "GreyDiv" se usa para establecer el ancho "900" para esta sección DIV interna con la propiedad de color de fondo establecida en "LightGrey" y la opción de padding-izquierda establecida en 500 píxeles.

Esto significa que el valor de "texto" de la sección Div interna se coloca a 500 píxeles desde el lado izquierdo de la página. El estilo CSS se realiza aquí y este código está listo para usar. Guardemos este código usando el Ctrl+S y ejecutemos este código usando el botón "Ejecutar" en la barra de tareas del código Visual Studio. El código se ejecuta y el navegador se abre para mostrar el resultado de este código HTML.

La página de Chrome muestra la salida de este código HTML como se muestra en la siguiente imagen. Muestra que el color de la página está configurado en rosa y la primera sección "Div" se agrega después del encabezado 1, i.mi. Sección de color blanco. Dentro de la primera sección "Div", se genera otra sección "Div", yo.mi. Sección de color gris. Se puede ver que el encabezado 1 y los datos dentro de la sección de la división interna se colocan a 500 píxeles del lado izquierdo de la página.

Ejemplo #03:

Hemos visto el uso de "píxeles" como una unidad para establecer el valor de una opción de "izquierda-izquierda" en el código HTML. Además de "PX", también podemos intentar usar el carácter porcentual "%" para establecer la opción de remo-izquierda en el CSS del código HTML. Por lo tanto, agregamos un encabezado "H1" con el título de "nombres" y creamos una lista desordenada de un total de 5 elementos en nuestra página web utilizando la etiqueta "UL" para "Lista no ordenada" y la etiqueta "Li" para insertar cada registro en la lista.

La clase "Título" se especifica para el encabezado 1 y la clase "Valores" se define para la lista desordenada. Dentro de la etiqueta "estilo", establecemos el valor de acolchado izquierdo para H1 y la lista desordenada en 20% usando los nombres de clase definidos en las etiquetas. Ahora, guarde su código para ver sus resultados.

Después de ejecutar este código en el código de Visual Studio, se inicia el navegador Chrome y se muestra la siguiente salida. El rumbo de "nombres" junto con la lista desordenada de 5 valores que contiene se muestran como se esperaba que está a un 10 por ciento del lado izquierdo. Así es como se puede usar la opción de remo-izquierda para agregar los datos lejos de la izquierda de cualquier página.

Dentro de los ejemplos anteriores, probamos la etiqueta de estilo CSS dentro del mismo archivo pero en el jefe del archivo. Ahora, usamos el estilo CSS en línea para el siguiente código HTML. Entonces, dentro de la etiqueta de cabeza, solo usamos la etiqueta de "título" para agregar el título de este archivo HTML, I.mi. Relleno izquierdo. Dentro del cuerpo de este archivo, usamos el mismo encabezado H1 y la lista desordenada. Estilamos el encabezado 1 y la lista desordenada en línea al establecer los valores para la opción de remo-izquierda en 12%. También colocamos el borde en el encabezado 1 con el color, Blue Violet. Guardemos el código y lo ejecutemos usando el botón "Ejecutar" del código VS.

Da el borde al encabezado 1 - "Nombres". Además, el encabezado y la lista desordenada se muestran al 12% de la izquierda de la página.

Conclusión

El párrafo introductorio de este artículo elabora el uso de CSS en HTML y les muestra las formas de usar la opción de padding-izquierda dentro de él. Discutimos los códigos simples pero elegantes del HTML en el código de Visual Studio para mostrar el uso de la opción de padding-izquierda. También probamos esta opción con los caracteres "PX" y "%" en la sección de estilo por separado para ver cómo cambia la salida. Para esto, tratamos de usar el estilo CSS en línea y delineado para los códigos HTML.