Las hojas de estilo en cascada, conocidas con cariño como CSS , son un lenguaje de diseño simple destinado a simplificar el proceso de hacer que las páginas web sean presentables. CSS le permite aplicar estilos a las páginas web. Más importante aún, CSS le permite hacer esto independientemente del HTML que conforma cada página web. Describe cómo debe verse una página web. CSS permite a los desarrolladores y diseñadores definir cómo se comporta, incluso cómo se colocan los elementos en el navegador.
En este artículo, aprenderemos sobre la propiedad de ancho y descubriremos si el ancho del elemento incluye relleno o no.
Ancho del elemento: la propiedad de ancho en CSS se usa para establecer el ancho del texto y las imágenes. El ancho se puede asignar al texto y las imágenes en forma de píxeles (px), porcentaje (%), centímetro (cm), etc. La propiedad de ancho no contiene relleno, bordes ni márgenes. La propiedad de ancho se reemplaza por las propiedades de ancho mínimo y ancho máximo . La propiedad de ancho , de forma predeterminada, establece el ancho del área de contenido, aunque si el valor del tamaño del cuadro se establece en border-box, establecerá el ancho del área del borde.
Relleno del elemento: los rellenos de CSS se utilizan para crear espacio alrededor del elemento, dentro de cualquier borde definido. Podemos configurar diferentes rellenos para lados individuales (superior, derecho, inferior, izquierdo). Es importante agregar propiedades de borde para implementar propiedades de relleno .
¿El ancho del elemento incluye relleno? No, el ancho del elemento no incluye el relleno, el margen ni el borde . La diferencia básica entre el relleno y el ancho es que en el relleno defines el espacio alrededor del elemento y, por otro lado, en el ancho defines el espacio del elemento.
Propiedad utilizada:
- ancho: Esta propiedad se utiliza para definir el tamaño del elemento.
- relleno: esta propiedad se utiliza para definir el espacio alrededor del elemento
Ejemplo 1: el relleno no se incluye cuando aplica la propiedad de ancho . El relleno se aplica solo cuando aplica relleno intencionalmente a cualquier elemento.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.with {
background-color: green;
width: 230px;
border: 2px solid black;
padding: 10px;
}
.without {
background-color: green;
width: 230px;
border: 2px solid black;
}
</style>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<div class=with>
<h2>With Padding</h2>
</div><br>
<div class=without>
<h2>Without Padding</h2>
</div>
</body>
</html>
Producción:
Ejemplo 2: el relleno no se incluye cuando aplica la propiedad de ancho . El relleno se aplica solo cuando aplica relleno intencionalmente a cualquier elemento.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1,h3{
text-align:center;
}
.with1 {
background-color:green;
border:4px solid black;
padding:10px;
}
.with2 {
background-color:green;
border:4px solid black;
padding:20px;
}
.with3 {
background-color:green;
border:4px solid black;
padding:30px;
}
.without {
background-color:green;
width:230px;
border:4px solid black;
}
</style>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<h3>A computer science portal for geeks</h3>
<div class=with1>
<button>With 10px Padding</button>
</div><br>
<div class=with2>
<button>With 20px Padding</button>
</div><br>
<div class=with2>
<button>With 30px Padding</button>
</div><br>
<div class=without>
<button>Without Padding</button>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por krishna_97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA