Como se mencion\u00f3 en el cap\u00edtulo anterior, un elemento block<\/em><\/strong> siempre ocupa todo el ancho disponible (se extiende hacia la izquierda y hacia la derecha tanto como puede).<\/p>\n\n\n\n\n\n\n\n Establecer el ancho de un elemento block<\/em><\/strong> evitar\u00e1 que se extienda hasta los bordes de su contenedor. Luego, puedes establecer los m\u00e1rgenes en autom\u00e1tico, para centrar horizontalmente el elemento dentro de su contenedor. El elemento ocupar\u00e1 el ancho especificado y el espacio restante se dividir\u00e1 en partes iguales entre los dos m\u00e1rgenes:<\/p>\n\n\n\n Nota<\/strong>: El problema con el <div><\/em><\/strong> anterior ocurre cuando la ventana del navegador es m\u00e1s peque\u00f1a que el ancho del elemento. Luego, el navegador agrega una barra de desplazamiento horizontal a la p\u00e1gina.<\/p>\n<\/blockquote>\n\n\n\n Usar max-width<\/em><\/strong> en su lugar, en esta situaci\u00f3n, mejorar\u00e1 el manejo de ventanas peque\u00f1as por parte del navegador. Esto es importante al hacer que un sitio se pueda usar en dispositivos peque\u00f1os.<\/p>\n\n\n\n Consejo<\/strong>: cambia el tama\u00f1o de la ventana del navegador a menos de 500 px de ancho, para ver la diferencia entre los dos divs<\/strong>.<\/p>\n<\/blockquote>\n\n\n\n Aqu\u00ed hay un ejemplo de los dos divs anteriores:<\/p>\n\n\n\n Usar width, max-width y margin: auto Como se mencion\u00f3 en el cap\u00edtulo anterior, un elemento block siempre ocupa todo el […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":563,"menu_order":30,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1285","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"Usar width, max-width y margin: auto Como se mencion\u00f3 en el cap\u00edtulo anterior, un elemento block siempre ocupa todo el […]","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1285","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=1285"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1285\/revisions"}],"predecessor-version":[{"id":1287,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1285\/revisions\/1287"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/563"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1285"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
\n
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
width: 500px;
margin: auto;
border: 3px solid #73ad21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73ad21;
}
<\/style>
<\/head>
<body>
<h2>CSS Max-width<\/h2>
<div class=\"ex1\">This div element has width: 500px;<\/div>
<br \/>
<div class=\"ex2\">This div element has max-width: 500px;<\/div>
<p>
<strong>Tip:<\/strong> Drag the browser window to smaller than 500px wide,
to see the difference between the two divs!
<\/p>
<\/body>
<\/html><\/pre>\n","protected":false},"excerpt":{"rendered":"