Cómo forzar el espacio entre una tabla css (página web receptiva)
Tengo una tabla CSS y me gustaría tener espacio entre las celdas pero no a la izquierda de la primera imagen y a la derecha de la última imagen.
Aquí hay una captura de pantalla de lo que tengo:
Aquí hay una captura de pantalla de lo que me gustaría:
El HTML actual es:
<div id="footer">
<div class="lower"><img src="images/one.jpg" alt="Ring being put on finger"/></div>
<div class="lower"><img src="images/two.jpg" alt="The mens trousers"/></div>
<div class="lower"><img src="images/three.jpg" alt="Flowers"/></div>
<div class="lower"><img src="images/four.jpg" alt="The rings"/></div>
</div>
y el CSS es
#footer {
display: table;
width: 100%;
max-width: 1024px;
margin-top: 1%;
}
.lower {
display: table-cell;
}
#footer img {
width: 100%;
height: auto;
max-width: 256px;
}
Tenga en cuenta que esta es una página web receptiva, por lo que me gustaría que el espacio permanezca siempre; sin embargo, me gustaría que el espacio cambie de acuerdo con el tamaño del dispositivo, por lo tanto, use%.