Inspector de espaciado CSS: lee y copia el modelo de caja
Un inspector de espaciado CSS que muestra el modelo de caja de un elemento, el padding y el margin de cada lado, el gap, el border radius y el display, y copia cada valor con un clic.
Actualizado el
Ag
- Ink
- Amber
- Paper
Un diseño se ve raro y el arreglo empieza por un solo elemento. El padding de un botón es demasiado ajustado, o el margin alrededor de una tarjeta es demasiado ancho, y quieres saber el número sin rebuscar en DevTools. Un inspector del modelo de caja CSS te ahorra esa búsqueda. Señalas el elemento y la sección Box muestra el modelo de caja con cada lado, valor por valor. SuperchargeInspect lee ese elemento por ti.
Qué muestra el inspector del modelo de caja CSS
La sección Box dibuja el modelo de caja del elemento en capas, de la más externa a la más interna: margin, luego border, luego padding y luego content. Cada lado del elemento tiene su propio valor, así que arriba, derecha, abajo e izquierda se leen por separado.
El centro muestra la caja de contenido como ancho por alto en píxeles CSS, el espacio que ocupan el texto y los hijos del elemento. El panel muestra el tamaño del contenido en números enteros.
Junto al diagrama, la sección muestra tres valores más por separado: Gap, Radius y Display. Radius es el valor de border-radius. Cada uno se lee y se copia por separado al hacer clic en él.
Cómo leer el modelo de caja de un elemento
Cada fila de abajo nombra una parte del modelo de caja del elemento y qué ajustar cuando el espacio no se ve bien.
| Valor | Qué te indica |
|---|---|
margin | El espacio fuera del borde, en cada lado |
border | La línea alrededor del padding, con su grosor en cada lado |
padding | El espacio entre el borde y el contenido, en cada lado |
| Contenido | El ancho por alto del contenido, en px CSS |
gap | El espacio entre los hijos del elemento |
| Radius | El redondeo de las esquinas, según border-radius |
display | El modo de diseño, como block, flex o grid |
Léelos de fuera hacia dentro, en el mismo orden en que los dibuja el diagrama.
Copiar valores de espaciado CSS
Cada valor de la sección Box es un botón. Haz clic en el padding superior y se copia solo ese valor. Haz clic en gap y se copia solo el gap. Copias un único valor cada vez, así que pegas solo lo que estás cambiando.
Para copiar todo el conjunto, abre el menú «More ways to copy» y elige «Copy text only». Incluye la lista completa de estilos observados, con valores en px para el padding y el margin en orden arriba, derecha, abajo, izquierda, y después gap, border-radius y display.
Lo que no mide
Lee un elemento cada vez, y solo uno. No hay regla, ni guías, ni superposición de grid o flex, ni medición de la distancia entre dos elementos. Para comparar dos elementos, bloquea el primero, anota su padding y su margin, luego pasa al otro con las teclas de flecha y lee sus valores.
Control con el teclado y privacidad
Empieza con Alt+Shift+E y luego muévete entre elementos con las teclas de flecha. Pulsa Ctrl+Up y Ctrl+Down para pasar al elemento padre o al hijo, o Option+Up y Option+Down en macOS. Al pasar al padre ves qué contenedor añade el espacio. Pulsa Enter para bloquear el elemento y Esc para volver a seleccionar o cerrar el panel.
Todo funciona en local. No hace llamadas de red y no hay cuenta, así que nada de lo que inspeccionas se envía a ningún sitio.
Consulta también fuentes y colores con el inspector CSS.
Preguntas frecuentes
¿Cómo ver el padding y el margin de un elemento?
¿Qué muestra el diagrama del modelo de caja?
¿Los valores se muestran en píxeles?
¿Puede medir la distancia entre dos elementos?
¿Envía datos de la página a alguna parte?
Funciones relacionadas
Muestra a tu herramienta de IA para programar el elemento exacto que quieres cambiar
Señala el elemento, añade una nota y copia una referencia con una captura de pantalla anotada y los estilos observados; luego pégala en la herramienta de IA para programar que ya usas.
Inspector CSS para cualquier elemento: consulta y copia los valores CSS
Un inspector de CSS que te permite ver el CSS de cualquier elemento de una web. Consulta la fuente, los colores, el espaciado y el modelo de caja, y copia los valores CSS a tu portapapeles.
Color hex de una web: encuentra el código hex de cualquier elemento
Inspecciona los colores de una web en cualquier página en vivo. Señala el elemento y su sección Colors muestra los colores del texto, del fondo y del borde. Un clic copia el código hex.