¿Como quitar espacios entre div con css o Jquery?

publicado por: Anonymous

He estado intentando quitar el espacio que se forma entre las filas de los cuadros. Esto es lo que he intentado.

He intentado solo ponerle border:1 px solid black y sigue sin tomar la forma que me gustaria. Quiero que quede la cuadricula sin esa doble linea que se observa.

_x000D_

_x000D_

var div = document.getElementById("click");_x000D_
guessX = 0;_x000D_
guessY = 0;_x000D_
_x000D_
function capturaCoor(event) {_x000D_
  var x = event.offsetX;_x000D_
  var y = event.offsetY;_x000D_
  guessX = x;_x000D_
  guessY = y;_x000D_
  console.log("x coords: " + guessX + ", y coords: " + guessY);_x000D_
}_x000D_
var i, j;_x000D_
for (i = 0; i < 525; i++) {_x000D_
  $("#click").prepend($('<div class="re"></div>'));_x000D_
}_x000D_
$(".re:odd").css("background-color", "white");

_x000D_

body,_x000D_
html {_x000D_
  padding: 0;_x000D_
  margin: 0;_x000D_
}_x000D_
_x000D_
.re {_x000D_
  height: 20px;_x000D_
  width: 20px;_x000D_
  background-color: black;_x000D_
  cursor: pointer;_x000D_
  border-bottom: 1px solid;_x000D_
  border-top: 1px solid;_x000D_
}_x000D_
_x000D_
.re:hover {_x000D_
  background-color: red;_x000D_
}_x000D_
_x000D_
#click {_x000D_
  width: 500px;_x000D_
  height: 500px;_x000D_
  border: 1px solid black;_x000D_
  display: flex;_x000D_
  flex-wrap: wrap;_x000D_
}

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<div id="click" onclick="capturaCoor(event)"></div>

_x000D_

_x000D_

_x000D_

Saludos!

solución

En tu caso esta definiendo las alturas, por lo tanto
se resuelve de la siguiente manera solo colocando en el #click el height: auto; y quitando los border de la clase .re

_x000D_

_x000D_

var div = document.getElementById("click");_x000D_
guessX = 0;_x000D_
guessY = 0;_x000D_
_x000D_
function capturaCoor(event) {_x000D_
  var x = event.offsetX;_x000D_
  var y = event.offsetY;_x000D_
  guessX = x;_x000D_
  guessY = y;_x000D_
  console.log("x coords: " + guessX + ", y coords: " + guessY);_x000D_
}_x000D_
var i, j;_x000D_
for (i = 0; i < 525; i++) {_x000D_
  $("#click").prepend($('<div class="re"></div>'));_x000D_
}_x000D_
$(".re:odd").css("background-color", "white");

_x000D_

body,_x000D_
html {_x000D_
  padding: 0;_x000D_
  margin: 0;_x000D_
}_x000D_
_x000D_
.re {_x000D_
  height: 20px;_x000D_
  width: 20px;_x000D_
  background-color: black;_x000D_
  cursor: pointer;_x000D_
_x000D_
}_x000D_
_x000D_
.re:hover {_x000D_
  background-color: red;_x000D_
}_x000D_
_x000D_
#click {_x000D_
  width: 500px;_x000D_
  height: auto;_x000D_
  border: 1px solid black;_x000D_
  display: flex;_x000D_
  flex-wrap: wrap;_x000D_
}

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<div id="click" onclick="capturaCoor(event)"></div>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *