path: root/files/pt-br/web/css/max-width/index.html

---
title: max-width
slug: Web/CSS/max-width
tags:
  - CSS
  - Dimensões
  - Layout
  - Limites
  - Máximo
  - Propriedade CSS
  - Referencia
  - largura
  - max-width
  - 'receita:propriedade-css'
  - tamanho
translation_of: Web/CSS/max-width
---
<div>{{CSSRef}}</div>

<div>A propriedade <strong><code>max-width</code></strong> do <a href="/en-US/docs/CSS">CSS</a> estabelece a largura máxima de um elemento. Ele evita que o <a href="/en-US/docs/Web/CSS/used_value">valor usado</a> da propriedade {{ cssxref("width") }} se torne maior que o valor especificado por <code>max-width</code>.</div>

<div>{{EmbedInteractiveExample("pages/css/max-width.html")}}</div>

<p class="hidden">O código dos exemplos interativos está armazenado em um repositório GitHub. Se você gostaria de contribuir com o projeto exemplos interativos, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e nos envie um pull request.</p>

<p><code>max-width</code> substitui {{cssxref("width")}}, mas {{cssxref("min-width")}} substitui <code>max-width</code>.</p>

<h2 id="Sintaxe">Sintaxe</h2>

<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; valor */
max-width: 3.5em;

/* &lt;porcentagem&gt; valor */
max-width: 75%;

/* Valores de keyword */
max-width: none;
max-width: max-content;
max-width: min-content;
max-width: fit-content;
max-width: fill-available;

/* Valores Globais */
max-width: inherit;
max-width: initial;
max-width: unset;
</pre>

<h3 id="Valores">Valores</h3>

<dl>
 <dt>{{cssxref("&lt;length&gt;")}}</dt>
 <dd>Define a <code>max-width</code> como um valor absoluto.</dd>
 <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
 <dd>Define a <code>max-width</code> como uma porcentagem da largura do bloco que o contém.</dd>
</dl>

<h4 id="Valores_Keyword">Valores Keyword</h4>

<dl>
 <dt><code>none</code></dt>
 <dd>A largura não possui valor máximo. (padrão)</dd>
 <dt><code>max-content</code>{{experimental_inline()}}</dt>
 <dd>A <code>max-width</code> intrínseca preferida.</dd>
 <dt><code>min-content</code>{{experimental_inline()}}</dt>
 <dd>O mínimo <code>max-width</code> intrínseco.</dd>
 <dt><code>fit-content({{cssxref("&lt;length-percentage&gt;")}})</code></dt>
 <dd>Use a fórmula <code>fit-content</code> com o espaço disponível substituído pelo argumento especificado, i.e. <code>min(max-content, max(min-content, <em>argumento</em>)).</code></dd>
</dl>

<h4 id="Preocupações_de_Acessibilidade">Preocupações de Acessibilidade</h4>

<p>Certifique-se que os elementos definidos com <code>max-width</code> não sejam truncados e/ou não obscureçam outros conteúdos quando a página for ampliada para aumentar o tamanho do texto.</p>

<dl>
 <dt><code>fill-available</code>{{experimental_inline()}}</dt>
 <dd>A largura contida do bloco sem o margin, border e padding horizontal. (Note que alguns navegadores implementaram um nome antigo para essa keyword, <code>available</code>.)</dd>
 <dt><code>fit-content</code>{{experimental_inline()}}</dt>
 <dd>O mesmo que <code>max-content.</code></dd>
</dl>

<h4 id="Sintaxe_formal">Sintaxe formal</h4>

<pre class="syntaxbox notranslate">{{csssyntax}}</pre>

<h4 id="Exemplos">Exemplos</h4>

<h3 id="Definindo_a_largura_máxima_em_pixels">Definindo a largura máxima em pixels</h3>

<p>Neste exemplo, o "filho" terá 150 pixels de largura ou a largura do "pai", o que for menor:</p>

<div id="basic-max-width-demo">
<pre class="brush: html notranslate">&lt;div id="pai"&gt;
  &lt;div id="filho"&gt;
    Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis.
  &lt;/div&gt;
&lt;/div&gt;
</pre>

<pre class="brush: css notranslate">#pai {
  background: lightblue;
  width: 300px;
}

#filho {
  background: gold;
  width: 100%;
  max-width: 150px;
}
</pre>
</div>

<h4 id="Resultado">Resultado</h4>

<p>{{EmbedLiveSample("<code>Setting_max_width_in_pixels</code>", 350, 100)}}</p>







<p>O valor de <code>fit-content</code> pode ser usado para atribuir o comprimento de um elemento no tamanho intrínseco necessário pelo seu conteúdo:</p>

<div id="fit-content-demo">
<pre class="brush: html notranslate" style="display: none;">&lt;div id="parent"&gt;
    &lt;div id="child"&gt;
        Child Text
    &lt;/div&gt;
&lt;/div&gt;
</pre>

<pre class="brush: css notranslate">#parent {
  background: lightblue;
  width: 300px;
}

#child  {
  background: gold;
  width: 100%;
  max-width: -moz-fit-content;
  max-width: -webkit-fit-content;
}
</pre>
</div>

<p>{{EmbedLiveSample("fit-content-demo", 400, 100)}}</p>

<h2 id="Preocupações_de_acessibilidade">Preocupações de acessibilidade</h2>

<p>Garantir que os elementos atribuidos com <code>max-width</code> não estejam cortados e/ou não obscureça outro conteúdo quando a página é ampliada para aumentar o tamanho do texto. </p>

<ul>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
 <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html" rel="noopener">Understanding Success Criterion 1.4.4  | W3C Understanding WCAG 2.0</a></li>
</ul>

<h2 id="Especificações">Especificações</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificação</th>
   <th scope="col">Status</th>
   <th scope="col">Comentário</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Sizing', '#width-height-keywords', 'max-width') }}</td>
   <td>{{ Spec2('CSS3 Sizing') }}</td>
   <td>Adiciona o <code>max-content</code>, <code>min-content</code>, <code>fit-content</code>, e <code>fill-available</code> keywords.<em> </em>(Ambos CSS3 Box e CSS3 Writing Modes são rascunhos usados para definir essas keywords, mas foram substituídas por essa especificação.<em>)</em></td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'max-width') }}</td>
   <td>{{ Spec2('CSS3 Transitions') }}</td>
   <td>Define <code>max-width</code> como animável.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS2.1', 'visudet.html#min-max-widths', 'max-width') }}</td>
   <td>{{ Spec2('CSS2.1') }}</td>
   <td>Definição inicial.</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidade com navegador</h2>

<div class="hidden">A tabela de compatibilidade desta página é gerada por dados estruturados. Se você gostaria de contribuir com esses dados, por favor verifique <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie nos um pull request.</div>

<p>{{Compat("css.properties.max-width")}}</p>

<h2 id="Veja_também">Veja também</h2>

<ul>
 <li>{{ Cssxref("width") }}, {{ Cssxref("min-width") }}, {{ Cssxref("max-height") }}</li>
 <li><a href="/en/CSS/box_model" title="en/CSS/box_model">The box model</a>, {{ Cssxref("box-sizing") }}</li>
</ul>