<html lang="es-es" dir="ltr"><head></head><body>### [Cómo eliminar el espacio en blanco alrededor de las opciones de imagen](https://wpforms.com/developers/how-to-remove-whitespace-from-around-image-choices/)

**Publicado:** 4 de junio de 2020
**Autor:** Equipo Editorial

**Extracto:** Este tutorial te mostrará cómo usar CSS para eliminar el espacio en blanco alrededor de las opciones de imagen cuando se usan casillas de verificación y opción múltiple. 

**Contenido:**

¿Quieres eliminar el espacio adicional que rodea tus imágenes al utilizar **Opciones de imagen** para los campos de formulario de **Casilla de verificación** o **Opción múltiple**? Con solo unas pocas líneas de CSS, puedes lograrlo sin esfuerzo, ¡y estamos aquí para guiarte en el proceso!

## Creación del formulario

Primero, comienza creando tu formulario en WPForms. Una vez que hayas creado tu formulario, agrega los campos que necesites, incluido el campo **Opción múltiple** que servirá como base para nuestra configuración de **Opciones de imagen**.

Si no estás seguro de cómo configurar las **Opciones de imagen**, puedes consultar nuestra documentación sobre cómo agregar Opciones de imagen a WPForms. Simplemente haz clic [aquí](https://wpforms.com/docs/how-to-add-image-choices-to-fields/ "Cómo agregar opciones de imagen a WPForms") para obtener instrucciones detalladas.

![Crea tu formulario y agrega tus campos de opción múltiple con las opciones de elección de imagen](https://wpforms.com/wp-content/uploads/2020/06/wpforms-image-choice-multiple-choice.jpg)

## Eliminación del espacio en blanco

Si no estás seguro de cómo o dónde agregar CSS a tu sitio, puedes consultar [este tutorial](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "Cómo agregar estilos CSS personalizados para WPForms") para obtener orientación.

#### Para todos los formularios

Por defecto, cuando agregas **Opciones de imagen** a tu formulario, aparece un espacio en blanco alrededor de la imagen debido al relleno CSS. Este espacio en blanco se puede ver en la siguiente imagen:

![Espacio en blanco alrededor de las imágenes agregado por defecto](https://wpforms.com/wp-content/uploads/2020/06/wpforms-whitespace-image-choices.jpg)
Para eliminar este espacio en blanco, deberás copiar y pegar el siguiente código CSS en tu sitio:

```

span.wpforms-image-choices-label {
    display: none !important;
}

.wpforms-field-label-inline {
    line-height: 0 !important;
}

label.wpforms-field-label-inline {
    padding: 0 !important;
}
```

Este código CSS no solo eliminará el espacio en blanco alrededor de las imágenes, sino que también ocultará las etiquetas asociadas con cada imagen, permitiendo que las imágenes se muestren de forma independiente.

![El espacio en blanco alrededor de la imagen se ha eliminado ahora.](https://wpforms.com/wp-content/uploads/2020/06/wpforms-whitespace-removed-after.jpg)

#### Para un formulario específico

Para eliminar este espacio en blanco para el ID de formulario `1328`, deberás copiar y pegar el siguiente código CSS en tu sitio:

```

form#wpforms-form-1328 span.wpforms-image-choices-label {
    display: none !important;
}
 
form#wpforms-form-1328 .wpforms-field-label-inline {
    line-height: 0 !important;
}
 
form#wpforms-form-1328 label.wpforms-field-label-inline {
    padding: 0 !important;
}
```

Deberás actualizar el `1328` anterior para que coincida con el ID de tu propio formulario. Si no estás seguro de dónde encontrar el ID de tu formulario, [revisa este artículo para obtener más ayuda](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/ "Cómo localizar el ID del formulario y el ID del campo").

¡Y eso es todo! Has eliminado con éxito el espacio en blanco alrededor de las imágenes en tu formulario. ¿Por qué no consultar más artículos sobre el estilo de las **Opciones de imagen**? Echa un vistazo a nuestro artículo sobre [Cómo personalizar las etiquetas para las opciones de imagen](https://wpforms.com/developers/how-to-customize-the-labels-for-image-choices/ "Cómo personalizar las etiquetas para las opciones de imagen").

**Categorías:** Estilo

**Etiquetas:** CSS

---</body></html>