Los datos expuestos en este blog, son solo de índole informativo. Por favor realiza siempre una copia de seguridad antes de realizar cualquier cambio en tu proyecto.
CSS: propiedad de espaciado de borde
Este tutorial de CSS explica cómo usar una propiedad de CSS llamada espaciado de borde Con sintaxis y ejemplos.
describir
La propiedad border-spacing de CSS define el espacio entre los bordes de las celdas adyacentes en una tabla cuando la tabla se representa con el modelo de borde dividido (consulte la propiedad border-collapse para cambiar el modelo de representación).
sintaxis
La propiedad CSS border-spacing se puede representar mediante uno o dos de los valores proporcionados.
sintaxis – un valor
Sintaxis de CSS Propiedades de espaciado de borde (con 1 valor) es:
border-spacing: value;Cuando se proporciona un valor, el valor de espacio entre bordes se aplicará al espacio horizontal y vertical entre celdas adyacentes. Puede ser uno de los siguientes:
| valor | describir |
|---|---|
| estable | valor fijo en px, em, … tabla {espaciado de borde: 10px;} |
| heredar | El elemento heredará el espacio entre bordes de su elemento principal tabla {border-spacing: heredar;} |
Sintaxis – dos valores
Sintaxis de CSS Propiedades de espaciado de borde (con 2 valores) es:
border-spacing: horizontal vertical;Cuando se proporcionan dos valores, el primer valor se aplicará al espacio horizontal entre celdas. El segundo valor se aplicará al espacio vertical entre celdas. Puede ser lo siguiente:
| valor | describir |
|---|---|
| estable | valor fijo en px, em, … tabla {border-spacing: 5px 8px; } |
notas
- La propiedad border-spacing se aplica a las tablas HTML representadas mediante el modelo de borde dividido (consulte la propiedad border-collapse para obtener más información sobre el modelo de borde).
- El modelo de borde dividido representa una tabla de modo que las celdas adyacentes tienen sus propios bordes distintos no compartidos, y la propiedad border-spacing determina el espacio entre las celdas.
- El modelo de borde colapsado representa una tabla para que las celdas adyacentes compartan sus bordes.
Compatibilidad del navegador
Las propiedades de espaciado de bordes de CSS tienen soporte básico para los siguientes navegadores:
- Aleación de cromo
- Firefox (Geco)
- Internet Explorer 8+ (IE 8+)
- Ópera 4+
- Safari (WebKit)
ejemplo
Discutiremos la propiedad border-spacing a continuación, explorando ejemplos de cómo usar esta propiedad en CSS.
Primero veamos un ejemplo de cómo configurar el espacio entre bordes en una tabla representada usando el modelo de borde dividido. Por ejemplo:
CSS se ve así:
table { border-spacing: 3px 10px; border: 1px solid red; }
th { border: 1px solid blue; }
td { border: 1px solid black; }HTML se ve así:
<table>
<tr>
<th>Column 1 Heading</th>
<th>Column 2 Heading</th>
</tr>
<tr>
<td>prograrmaplus.com</td>
<td>Technical reference site</td>
</tr>
<tr>
<td>checkyourmath.com</td>
<td>Math calculation site</td>
</tr>
<tr>
<td>bigactivities.com</td>
<td>Kids activity site</td>
</tr>
</table>Una tabla representada usando el modelo de borde dividido se ve así:
En este ejemplo de espaciado de bordes CSS, configuramos las propiedades de espaciado de bordes en 3 px horizontalmente y 10 px verticalmente. Como puede ver, la propiedad border-spacing funciona como se esperaba en las tablas representadas con el modelo de borde separado, que es el modelo de representación predeterminado para las tablas HTML.
Ahora veamos qué sucede cuando cambia el modelo de representación al modelo de borde colapsado (especificado por border-collapse:collapse).
table { border-spacing: 3px 10px; border-collapse: collapse; border: 1px solid red; }
th { border: 1px solid blue; }
td { border: 1px solid black; }Ahora, usando el modelo de borde colapsado, nuestra tabla se ve así:
Como puede ver, una vez que configuramos la propiedad border-collapse para colapsar, la propiedad border-spacing no afecta nuestra tabla.