diferença entre largura automática e largura 100 por cento

98

Anteriormente, minha suposição width: autoera de que a largura é definida como a do conteúdo. Agora vejo que ocupa toda a largura do pai.

Alguém pode descrever as diferenças entre eles?

html css

— Navin Rauniyar
fonte

possível duplicata de Configuração de largura: auto leva à largura: 100%

— Adriano Repetti 04/07/2013

Resumindo: 1) auto, a largura / altura do div pai será a soma de seus filhos. 2) 100 por cento, sua largura / altura será dos pais. Veja o artigo aqui

— Alan Dong

141

Largura automática

A largura inicial de um elemento de nível de bloco como div ou p é automática. Isso faz com que ele se expanda para ocupar todo o espaço horizontal disponível dentro do bloco que o contém. Se houver qualquer preenchimento ou borda horizontal, as larguras deles não são adicionadas à largura total do elemento.

Largura 100%

Por outro lado, se você especificar largura: 100%, a largura total do elemento será 100% do bloco que o contém mais qualquer margem horizontal, preenchimento e borda (a menos que você tenha usado tamanho de caixa: caixa de borda, nesse caso apenas as margens são adicionadas aos 100% para alterar como sua largura total é calculada). Isso pode ser o que você deseja, mas provavelmente não é.

Para visualizar a diferença veja esta imagem:

insira a descrição da imagem aqui

Fonte

— Bhojendra Rauniyar
fonte

3

Para aqueles que estão curiosos sobre por width: autoque se comporta dessa maneira: stackoverflow.com/questions/28353625/…

— Hashem Qolami

1

por isso autofaz o mesmo quefill-available

— jiggunjer

2

Então, basicamente, não tem nada a ver com o tamanho do conteúdo dos elementos, mas se refere totalmente à largura do pai?

— haemse

82

width: auto; tentará o máximo possível manter um elemento com a mesma largura de seu contêiner pai quando espaço adicional for adicionado a partir das margens, preenchimento ou bordas.
width: 100%;tornará o elemento tão largo quanto o contêiner pai. Espaçamento extra será adicionado ao tamanho do elemento, independentemente do pai. Isso geralmente causa problemas.

insira a descrição da imagem aqui

— Ian Jennings
fonte

2

a mesma coisa que o @ C-link fornecido, mas uma interface mais gráfica extra. então +1

— Navin Rauniyar

8

Trata-se de margens e limites. Se você usar width: autoe adicionar borda, seu div não ficará maior que seu contêiner. Por outro lado, se você usar width: 100%e alguma borda, a largura do elemento será 100% + borda ou margem. Para mais informações veja isto .

— Mateusz
fonte

4

Contanto que o valor da largura seja automático, o elemento pode ter margem horizontal, preenchimento e borda sem se tornar mais largo que seu contêiner (a menos, é claro, a soma de margem esquerda + borda esquerda largura + preenchimento esquerdo + preenchimento direito + border-right-width + margin-right é maior que o contêiner). A largura de sua caixa de conteúdo será o que restar quando a margem, o preenchimento e a borda forem subtraídos da largura do contêiner.

Por outro lado, se você especificar largura: 100%, a largura total do elemento será 100% do bloco que o contém mais qualquer margem horizontal, preenchimento e borda (a menos que você tenha usado tamanho de caixa: caixa de borda, nesse caso apenas as margens são adicionadas aos 100% para alterar como sua largura total é calculada). Isso pode ser o que você deseja, mas provavelmente não é.

Fonte:

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

— Gokul Gopala Krishnan
fonte

3

A largura inicial de um elemento de nível de bloco como div ou p é automática.

Use width: auto para desfazer larguras explicitamente especificadas.

se você especificar largura: 100%, a largura total do elemento será 100% do bloco que o contém mais qualquer margem horizontal, preenchimento e borda.

Então, da próxima vez que você definir a largura de um elemento de nível de bloco para 100% para fazê-lo ocupar toda a largura disponível, considere se o que você realmente deseja é defini-lo como automático.

— Michael Unterthurner
fonte

3

Largura 100%: fará o conteúdo com 100%. margem, borda, preenchimento serão adicionados a essa largura e o elemento irá estourar se algum desses for adicionado.

Largura automática: Vai caber o elemento no espaço disponível, incluindo margem, borda e preenchimento. o espaço restante após o ajuste de margem + preenchimento + borda ficará disponível largura / altura.

Largura 100% + tamanho da caixa: caixa de borda: Ele também vai caber o elemento no espaço disponível, incluindo borda, preenchimento (a margem fará com que ele transborde o contêiner).

— Nishant Baranwal
fonte

1

Usando largura: automático; + display: bloco embutido; em css dando um efeito incrível.

width : auto;
display: inline-block;

— Mohammed Javed
fonte

2

Isso não responde à questão da diferença entre 100 & e automático.

— JoeTidee

1

Sim, eu sei, mas estou tentando mostrar aqui sobre width: auto e display: inline-block . Quando queremos aumentar automaticamente a largura de qualquer elemento de nível de bloco, podemos usar isso. E a diferença entre 100% e auto

— Mohammed Javed

0

Quando dizemos

width:auto;

largura nunca excederá a largura total do elemento pai. A largura máxima é a largura do pai. Mesmo se adicionarmos borda, preenchimento e margem, o conteúdo do próprio elemento se tornará menor para dar espaço para borda, preenchimento e margem. Caso o espaço necessário para borda + preenchimento + margem seja maior que a largura total do elemento pai, a largura do conteúdo se tornará zero.

Quando dizemos

width:100%;

largura do conteúdo do elemento se tornará 100% do elemento pai e, a partir de agora, se adicionarmos borda, preenchimento ou margem, isso fará com que o elemento filho exceda a largura do elemento pai e começará a transbordar do elemento pai.

— Santosh Kadam
fonte