¿Cuál es la diferencia entre ancho/alto en CSS y atributos HTML de ancho/alto?

Algunos elementos HTML aceptan widthy heightcomo atributos. Algunos no lo hacen. Por ejemplo:

!-- valid, works, is a good idea --img src="..." alt="..."iframe src="..."/iframesvg/svg!-- not valid, doesn't work, not a good idea --div/divspan/span

A esos atributos a veces se les denomina atributos de presentación. Lo que hay que saber sobre ellos es que quedan anulados por cualquier otra información de estilo. Eso los hace ideales como alternativa.

Entonces, si CSS se carga y tiene una declaración como:

img {  width: 400px;}

…eso anulará el width="500"de la imgetiqueta de arriba. Los atributos de presentación son el tipo de estilo más débil, por lo que cualquier CSS los anula, incluso los selectores con muy baja especificidad.

Lo que podría resultar un poco confuso es que los atributos de presentación parecen tener una alta especificidad. Estos estilos en línea , por ejemplo, son muy fuertes:

img src="..." alt="..."

Usando un estilo en línea (que funciona en cualquier elemento, no en unos pocos seleccionados), hemos pasado de la forma más débil de aplicar ancho y alto a una de las más fuertes. CSS normal no anulará esto, con un selector de cualquier nivel de especificidad. Si necesitamos anularlos desde CSS, necesitaremos !importantreglas.

img {  width: 400px !important;}

Para reiterar, los atributos de presentación de los elementos que los aceptan (p. ej img. iframe, canvas, svg, video) son una buena idea. Son información alternativa sobre el tamaño y el tamaño a medida que se carga la página. Son particularmente útiles en svg, que pueden dimensionarse enormemente de una manera incómoda si tienen viewBoxatributos de ancho y alto y carecen de ellos. Los navegadores incluso hacen magia especial con las imágenes, donde el ancho y el alto se utilizan para reservar el espacio derivado de la relación de aspecto correcta en una situación con imágenes fluidas, lo cual es excelente para una experiencia de carga de páginas fluida.

Pero los atributos de presentación también son débiles y normalmente se anulan en el CSS.