---
title: max-block-size
slug: Web/CSS/max-block-size
translation_of: Web/CSS/max-block-size
---
<div>{{CSSRef}}{{SeeCompatTable}} </div>

<p><span class="seoSummary">La propiedad de <a href="/en-US/docs/Web/CSS">CSS</a> <code><strong>max-block-size</strong></code> especifica el tamaño máximo de un elemento en la dirección opuesta a la de la dirección de escritura según lo especificado por {{cssxref("writing-mode")}}.</span> Esto es, si la dirección de escritura es horizontal, entonces <code>max-block-size</code> es equivalente a {{cssxref("max-height")}}; si la dirección de escritura es vertical, <code>max-block-size</code> es lo mismo que {{cssxref("max-width")}}.</p>

<p>La longitud máxima de la otra dimensión se especifica usando la propiedad {{cssxref("max-inline-size")}}.</p>

<p>Esto es útil porque <code>max-width</code> siempre se utiliza para tamaños horizontales y <code>max-height</code> siempre se usa para tamaños verticales, y si necesitas establecer longitudes en función del tamaño del contenido del texto, debes poder hacerlo con la dirección de escritura en mente.</p>

<p>En cualquier momento usarías normalmente <code>max-height</code> o <code>max-width</code>, en su lugar deberías usar <code>max-block-size</code>para establecer el máximo "height" del contenido (even though this may not be a vertical value) y <code>max-inline-size</code> para establecer el máximo "width" del contenido (aunque esto puede ser más bien vertical en lugar de horizontal). Mira el {{SectionOnPage("/en-US/docs/Web/CSS/writing-mode", "Example")}}, que muestra los diferentes modos de escritura en acción.</p>

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

<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>

<h2 id="Sintaxis">Sintaxis</h2>

<pre class="brush:css no-line-numbers">/* &lt;length&gt; values */
max-block-size: 300px;
max-block-size: 25em;

/* &lt;percentage&gt; values */
max-block-size: 75%;

/* Keyword values */
max-block-size: none;
max-block-size: max-content;
max-block-size: min-content;
max-block-size: fit-content;
max-block-size: fill-available;

/* Global values */
max-block-size: inherit;
max-block-size: initial;
max-block-size: unset;
</pre>

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

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

<p>El valor de la propiedad <code>max-block-size</code> puede ser cualquier valor legal de las popiedades {{cssxref("max-width")}} y {{cssxref("max-height")}}:</p>

<p>{{page("/en-US/docs/Web/CSS/max-width", "Values")}}</p>

<h3 id="Cómo_writing-mode_afecta_la_directionalidad">Cómo writing-mode afecta la directionalidad</h3>

<p>Los valores de <code>writing-mode</code> afecta la asignación de <code>max-block-size</code> a <code>max-width</code> o <code>max-height</code> como sigue:</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Valores de <code>writing-mode</code></th>
   <th scope="col"><code>max-block-size</code> es equivalente a</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>horizontal-tb</code>, <code>lr</code> {{deprecated_inline}}, <code>lr-tb</code> {{deprecated_inline}}, <code>rl</code> {{deprecated_inline}}, <code>rb</code> {{deprecated_inline}}, <code>rb-rl</code> {{deprecated_inline}}</td>
   <td>{{cssxref("max-height")}}</td>
  </tr>
  <tr>
   <td><code>vertical-rl</code>, <code>vertical-lr</code>, <code>sideways-rl</code> {{experimental_inline}}, <code>sideways-lr</code> {{experimental_inline}}, <code>tb</code> {{deprecated_inline}}, <code>tb-rl</code> {{deprecated_inline}}</td>
   <td>{{cssxref("max-width")}}</td>
  </tr>
 </tbody>
</table>

<div class="note">
<p>The <code>writing-mode</code> values <code>sideways-lr</code> and <code>sideways-rl</code> were removed from the CSS Writing Modes Level 3 specification late in its design process. They may be restored in Level 4.</p>
</div>

<div class="note">
<p>The writing modes <code>lr</code>, <code>lr-tb</code>, <code>rl</code>, <code>rb</code>, and <code>rb-tl</code> are no longer allowed in {{Glossary("HTML")}} contexts; they may only be used in {{Glossary("SVG")}} 1.x contexts.</p>
</div>

<h3 id="Sintaxis_formal">Sintaxis formal</h3>

{{csssyntax}}

<h2 id="Ejemplo">Ejemplo</h2>

<p>En este ejemplo, el mismo texto (las oraciones iniciales del {{interwiki("wikipedia", "Herman Melville", "Herman Melville's")}} novel <em>{{interwiki("wikipedia", "Moby-Dick")}}</em>) es presentado en ambos modos de escritura: <code>horizontal-tb</code> y <code>vertical-rl</code>.</p>

<p>Todo lo demás sobre las dos cajas es idéntico, incluidos los valores utilizados para {{cssxref("max-block-size")}}.</p>

<h3 id="Contenido_HTML">Contenido HTML </h3>

<p>El HTML simplemente establece los dos bloques {{HTMLElement("div")}} que serán presentados con su {{cssxref("writing-mode")}} estableciendo el uso de las clases <code>horizontal</code> o <code>vertical</code>. Ambas cajas comparten la clase <code>standard-box</code>, que simplemente establece colores, relleno, y sus respectivos valores de <code>max-block-size</code>.</p>

<pre class="brush: html">&lt;p&gt;Writing mode &lt;code&gt;horizontal-tb&lt;/code&gt; (the default):&lt;/p&gt;
&lt;div class="standard-box horizontal"&gt;
  Call me Ishmael. Some years ago—never mind how
  long precisely—having little or no money in my
  purse, and nothing particular to interest me on
  shore, I thought I would sail about a little and see
  the watery part of the world. It is a way I have of
  driving off the spleen and regulating the
  circulation.
&lt;/div&gt;

&lt;p&gt;Writing mode &lt;code&gt;vertical-rl&lt;/code&gt;:&lt;/p&gt;
&lt;div class="standard-box vertical"&gt;
  Call me Ishmael. Some years ago—never mind how
  long precisely—having little or no money in my
  purse, and nothing particular to interest me on
  shore, I thought I would sail about a little and see
  the watery part of the world. It is a way I have of
  driving off the spleen and regulating the
  circulation.
&lt;/div&gt;</pre>

<h3 id="Contenido_CSS">Contenido CSS </h3>

<p>El CSS está definido por tres clases. La primera, <code>standard-box</code>, es aplicada a ambas cajas, como se ve arriba. Proporciona un estilo estándar que incluye los tamaños de bloque mínimo y máximo, tamaño de fuente, etc.</p>

<p>Después que vienen las clases <code>horizontal</code> y <code>vertical</code>, que agregan las propiedades {{cssxref("writing-mode")}} para la caja, con el valor establecido para <code>horizontal-tb</code> o <code>vertical-rl</code> dependiendo en qué clase se usa.</p>

<pre class="brush: css">.standard-box {
  padding: 4px;
  background-color: #abcdef;
  color: #000;
  font: 16px "Open Sans", "Helvetica", "Arial", sans-serif;
  max-block-size: 160px;
  min-block-size: 100px;
}

.horizontal {
  writing-mode: horizontal-tb;
}

.vertical {
  writing-mode: vertical-rl;
}
</pre>

<h3 id="Resultado">Resultado</h3>

<p>Las dos cajas se ven así al final:</p>

<p>{{EmbedLiveSample("Ejemplo", 600, 850)}}</p>

<h2 id="Especificación">Especificación</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentario</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("CSS Logical Properties", "#propdef-max-block-size", "max-block-size")}}</td>
   <td>{{Spec2("CSS Logical Properties")}}</td>
   <td>Definición inicial.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>



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

<h2 id="Mira_también">Mira también</h2>

<ul>
 <li>Las propiedades físicas mapeadas: {{cssxref("max-width")}} y {{cssxref("max-height")}}</li>
 <li>Configuración del tamaño máximo de la otra dirección: {{cssxref("max-inline-size")}}</li>
 <li>{{cssxref("writing-mode")}}</li>
</ul>