diferencia entre ancho automático y ancho 100 por ciento

Anteriormente, mi suposición width: autoera que el ancho se establece en el del contenido. Ahora veo que ocupa todo el ancho del padre.

¿Alguien puede describir las diferencias entre estos?

Ancho automático

El ancho inicial de un elemento de nivel de bloque como div o p es automático. Esto hace que se expanda para ocupar todo el espacio horizontal disponible dentro de su bloque contenedor. Si tiene algún relleno o borde horizontal, los anchos de esos no se suman al ancho total del elemento.

Ancho 100%

Por otro lado, si especifica ancho: 100%, el ancho total del elemento será el 100% de su bloque contenedor más cualquier margen horizontal, relleno y borde (a menos que haya usado box-sizing: border-box, en cuyo caso solo se agregan márgenes al 100% para cambiar la forma en que se calcula su ancho total). Esto puede ser lo que desea, pero lo más probable es que no lo sea.

Para visualizar la diferencia, vea esta imagen:

Fuente

• width: auto; hará todo lo posible por mantener un elemento del mismo ancho que su contenedor principal cuando se agregue espacio adicional desde los márgenes, el relleno o los bordes.

• width: 100%;hará que el elemento sea tan ancho como el contenedor principal. Se agregará espacio adicional al tamaño del elemento sin tener en cuenta el elemento principal. Esto suele causar problemas.

Se trata de márgenes y bordes. Si usa width: auto, luego agrega un borde, su div no será más grande que su contenedor. Por otro lado, si usa width: 100%y algún borde, el ancho del elemento será 100% + borde o margen. Para obtener más información, consulte esto .

Siempre que el valor de ancho sea automático, el elemento puede tener margen horizontal, relleno y borde sin ser más ancho que su contenedor (a menos, por supuesto, la suma de margin-left + border-left-width + padding-left + padding-right + border-right-width + margin-right es más grande que el contenedor). El ancho de su cuadro de contenido será el que quede cuando el margen, el relleno y el borde se hayan restado del ancho del contenedor.

Por otro lado, si especifica ancho: 100%, el ancho total del elemento será el 100% de su bloque contenedor más cualquier margen horizontal, relleno y borde (a menos que haya usado box-sizing: border-box, en cuyo caso solo se agregan márgenes al 100% para cambiar la forma en que se calcula su ancho total). Esto puede ser lo que desea, pero lo más probable es que no lo sea.

Fuente:

http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/

El ancho inicial de un elemento de nivel de bloque como div o p es automático.

Use width: auto para deshacer los anchos especificados explícitamente.

si especifica ancho: 100%, el ancho total del elemento será el 100% de su bloque contenedor más cualquier margen horizontal, relleno y borde.

Entonces, la próxima vez que se encuentre configurando el ancho de un elemento de nivel de bloque al 100% para que ocupe todo el ancho disponible, considere si lo que realmente desea es configurarlo en automático.

Ancho 100%: Hará contenido al 100%. margen, borde, relleno se agregarán a este ancho y el elemento se desbordará si se agrega alguno de estos.

Ancho automático: se ajustará al elemento en el espacio disponible, incluido el margen, el borde y el relleno. el espacio restante después de ajustar el margen + relleno + borde estará disponible ancho / alto.

Ancho 100% + tamaño de caja: caja de borde: También se ajustará al elemento en el espacio disponible, incluyendo borde, relleno (el margen hará que se desborde del contenedor).

Usando ancho: auto; + pantalla: bloque en línea; en CSS dando un efecto impresionante.

width : auto;
display: inline-block;

Cuando decimos

width:auto;

el ancho nunca excederá el ancho total del elemento padre. El ancho máximo es el ancho del padre. Incluso si agregamos borde, relleno y margen, el contenido del elemento en sí se volverá más pequeño para dar espacio para el borde, el relleno y el margen. En caso de que el espacio requerido para el borde + relleno + margen sea mayor que el ancho total del elemento principal, entonces el ancho del contenido será cero.

Cuando decimos

width:100%;

el ancho del contenido del elemento se convertirá en el 100% del elemento principal y, a partir de ahora, si agregamos borde, relleno o margen, el elemento secundario superará el ancho del elemento principal y comenzará a desbordarse del elemento principal.