Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Quitar espacio en <section> alineados

Estas en el tema de Quitar espacio en <section> alineados en el foro de CSS en Foros del Web. 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. ...
  #1 (permalink)  
Antiguo 15/05/2014, 01:30
 
Fecha de Ingreso: abril-2014
Ubicación: 3 metros sobre la casa de abajo
Mensajes: 40
Antigüedad: 10 años, 2 meses
Puntos: 6
Quitar espacio en <section> alineados

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>
CSS:
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!
  #2 (permalink)  
Antiguo 15/05/2014, 01:56
 
Fecha de Ingreso: julio-2010
Ubicación: A Coruña
Mensajes: 505
Antigüedad: 14 años
Puntos: 60
Respuesta: Quitar espacio en <section> alineados

al .cont_recuadros ponle un font-size: 0;

y la segunda duda... creo que te refieres a Box-sizing: Border-box, que lo que te hace es no contabilizar las dimensiones del padding en el elemento.
__________________
http://zeromm.es/
Diseñador Web | Experto en Responsive Design, CSS3 y Optimización Web.
  #3 (permalink)  
Antiguo 15/05/2014, 02:12
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años
Puntos: 2114
Respuesta: Quitar espacio en <section> alineados

Lo del borde tal vez sea outline. Aunque como dice Zeromm mejor cambiar el modelo de caja de CSS con box-sizing.
  #4 (permalink)  
Antiguo 15/05/2014, 20:31
 
Fecha de Ingreso: abril-2014
Ubicación: 3 metros sobre la casa de abajo
Mensajes: 40
Antigüedad: 10 años, 2 meses
Puntos: 6
Respuesta: Quitar espacio en <section> alineados

@Zeromm: intenté lo del font-size: 0; pero no causa efecto ya que no tengo texto dentro del contenedor.

@pzin: definitivamente era el outline.

Gracias a ambos por sus valiosas sugerencias. Ya solucioné el problema, y lo voy a explicar por si acaso alguien más desea hacer lo mismo que yo:

Código HTML:
<section class="cont_recuadros">
                   <section class="recuadros" id="cuadro1"></section>
                   <section class="recuadros" id="cuadro2"></section>
                   <section class="recuadros" id="cuadro3"></section>
                   <section class="recuadros" id="cuadro4"></section>
                   <section class="recuadros" id="cuadro5"></section>
                   <section class="recuadros" id="cuadro6"></section>
                   <section class="recuadros" id="cuadro7"></section>
                   <section class="recuadros" id="cuadro8"></section>
                   <section class="recuadros" id="cuadro9"></section>
</section> 
Código:
.cont_recuadros {
	width: 75%;
	height: 100%;
	margin-left: 25%;
}

.recuadros {
	width: 33.3%;
	height: 31.7%;
	background: transparent;
	outline: dotted;
	outline-width: 1px;
	float: left;
}
La ID de los cuadritos no la coloco porque aun no le he dado color a cada uno, pero bien se sabe que cada cuadro se puede moficiar por separado mediante su id unica.

Resultado final:

  #5 (permalink)  
Antiguo 16/05/2014, 02:49
 
Fecha de Ingreso: julio-2010
Ubicación: A Coruña
Mensajes: 505
Antigüedad: 14 años
Puntos: 60
Respuesta: Quitar espacio en <section> alineados

El font size: 0 no es para darle formato a los textos (en este caso), es para eliminar los espacios que se generan con "inline-block:

Aquí tienes un ejemplo.

Ves que hay espacios entre los elementos, pues si le añades a ".cont_recuadros" un font-size de 0, verás que esos espacios desaparecen.
__________________
http://zeromm.es/
Diseñador Web | Experto en Responsive Design, CSS3 y Optimización Web.

Etiquetas: background, espacio, html, section, tamaño, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:23.