Hola comunidad, hoy tengo una pequeña duda que he solucionado otras veces pero que no recuerdo cómo lo había hecho antes. Es una laguna mental.
Debo posicionar algunos <section> horizontalmente, pero mi problema es que estos al ser alineados me dejan un espacio en blanco entre ellos, exactamente así:
La idea es que los <section>
NO dejen el espacio en blanco, así:
Para posicionarlos horizontalmente usé
display: inline-block; y me generaba el resultado de la primera imagen, pero luego les puse un vertical-align: top; y ya el espacio en blanco horizontal desaparecía, lo malo es que aun queda el espacio a los lados de los reuadros. Otra cosa que hice fue cambiarle el tamaño a los recuadros, pero aun seguía manteniendose el espacio entre los recuadros, y si los agrandaba mas uno de los recuadros saltaba para la linea inferior, o sea, no me sirve.
Voy a dejar el Html de esa sección:
HTML:
Código:
<section id="seccion1">
<section class="cont_recuadros">
<section id="cuadro"></section>
<section id="cuadro"></section>
<section id="cuadro"></section>
<section id="cuadro"></section>
<section id="cuadro"></section>
<section id="cuadro"></section>
</section>
</section>
Código:
.cont_recuadros {
width: 75%;
height: 100%;
margin-left: 25%;
}
#cuadro {
width: 32%;
height: 32%;
background: red;
display: inline-block;
/*vertical-align: top;*/
text-align: center;
border:dashed;
border-width: 1px;
}
La intención es colocar una serie de imagenes exactamente como se ven en esta pagina: http://cosasquenosabias.com/index.php
Aparte de la duda anterior, tengo otra pequeña duda que no recuerdo donde la habré leído:
Tengo entendido que hay un tipo de borde que trabaja
SOBRE el elemento y no a los lados (como el border que conocemos), de esta manera no afecta las medidas del elemento. ¿Como se llama ese tipo de borde? Me gustaria usarlo para maquetar, lo leí hace tiempo, pero no recuerdo donde
De antemano muchas gracias a quienes me puedan ayudar
saludos!