En HTML 5, pocos elementos siguen los atributos de ancho y alto y el máximo de elementos no sigue este atributo. Como los elementos img , iframe , canvas y svg siguen los atributos de ancho y alto pero los elementos div , span , article y section no los siguen.
Los atributos de ancho y alto se ven afectados en las etiquetas img , svg , son un tipo de estilo débil, pueden ser anulados por CSS. Si ha asignado una etiqueta img con ancho = «500» y alto = «200»y cargue una propiedad CSS de ancho y alto para la etiqueta img como ancho: 400px; entonces ese 500 será embotado 400 afectará la imagen.
<!-- Normally in HTML -->
<img src=" " width="600" height="200">
/* In CSS for override*/
img {
width: 400px;
height: 400px;
}
Hay algunos atributos más que no se seleccionan para algunos elementos que se ven muy afectados en la salida. Para aplicar propiedades CSS en esos elementos, debe saber cómo aplicar !important en CSS? .
Diferencias entre el atributo ancho/alto HTML y la propiedad ancho/alto CSS:
| Atributo de ancho/alto HTML | Propiedad de ancho/alto de CSS |
|---|---|
| Se utiliza para presentaciones. | Se utiliza para el efecto real en la web. |
| Afecta a algunos elementos HTML como img, svg, canvas, etc. | Afecta a todos los elementos HTML (!important puede ser necesario para anular los estilos en línea). |
| Reserva el espacio requerido con imágenes fluidas para una carga suave. | No reserva los espacios requeridos, por lo que cuando ocurran los elementos, la página se agitará varias veces. |
El siguiente ejemplo utiliza atributos de alto/ancho y propiedad de alto/ancho.
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
Comparison between height/width
attributes and height/width
property
</title>
<style>
h1 {
color: green;
}
.container {
width: 95%;
border: 2px solid black;
padding: 5px;
height: 400px;
}
.first {
text-align: center;
width: 45%;
float: left;
}
.second {
text-align: center;
width: 45%;
float: right;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h2>
HTML height/width Attribute Vs
CSS height/width property
</h2>
<div class="container">
<div class="first">
<h3>HTML width/height Attributes</h3>
<img src="" width="150px" height="150px"
style="border:2px solid #000000;">
<iframe src="" width="150px" height="150px"
style="border:2px solid #000000;">
</iframe>
<canvas src="" width="150px" height="150px"
style="border:2px solid #000000;">
</canvas>
<svg src="" width="150px" height="150px"
style="border:2px solid #000000;">
</svg>
</div>
<div class="second">
<h3>CSS width/height Property</h3>
<div width="150px" height="150px"
style="border:2px solid #000000;">
This is div tag
</div>
<br><br>
<span width="150px" height="150px"
style="border:2px solid #000000;">
This is span tag
</span>
<br><br>
<article width="150px" height="150px"
style="border:2px solid #000000;">
This is article tag
</article>
<br><br>
<section width="150px" height="150px"
style="border:2px solid #000000;">
This is section tag
</section>
</div>
</div>
</center>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por Sabya_Samadder y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA