How to remove spaces between div with css or Jquery?

Question

How to remove spaces between div with css or Jquery?

Navigation

#1 by (5 votes)
#2 by (2 votes)
#3 by (1 votes)

4

I have been trying to remove the space that forms between the rows of the tables. This is what I have tried.

I just tried to put border: 1 px solid black and still does not take the form I would like. I want the grid to be left without that double line that is observed.

var div = document.getElementById("click");
guessX = 0;
guessY = 0;

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

body,
html {
  padding: 0;
  margin: 0;
}

.re {
  height: 20px;
  width: 20px;
  background-color: black;
  cursor: pointer;
  border-bottom: 1px solid;
  border-top: 1px solid;
}

.re:hover {
  background-color: red;
}

#click {
  width: 500px;
  height: 500px;
  border: 1px solid black;
  display: flex;
  flex-wrap: wrap;
}

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

Greetings!

jquery html css

asked by Luis Fernando 27.04.2018 в 16:53

source

3 answers

2

Adding to the align-content: baseline; container should justify the elements.

var div = document.getElementById("click");
guessX = 0;
guessY = 0;

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

body,
html {
  padding: 0;
  margin: 0;
}

.re {
  height: 20px;
  width: 20px;
  background-color: black;
  cursor: pointer;
  border-bottom: 1px solid;
  border-top: 1px solid;
}

.re:hover {
  background-color: red;
}

#click {
  width: 500px;
  height: 500px;
  border: 1px solid black;
  display: flex;
  flex-wrap: wrap;
  align-content: baseline;
}

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

If you want to learn more about how to use flex, I recommend you try this page for beginners who explain you pretty well and with a game.

answered by 27.04.2018 в 17:34

1

You can remove the height. Also when creating your DIVS they were poorly closed.

Greetings

var div = document.getElementById("click");
guessX = 0;
guessY = 0;

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

body,
html {
  padding: 0;
  margin: 0;
}

.re {
  width: 20px;
  background-color: black;
  cursor: pointer;
  
}

.re:hover {
  background-color: red;
}

#click {
  width: 500px;
  height: 500px;
  border: 1px solid black;
  display: flex;
  flex-wrap: wrap;
}

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

answered by 27.04.2018 в 17:12

is there any difference between p and paragraph without this element? How can I get a magnifying glass when selecting an editext on the keyboard? Android Studio

score 5 · Accepted Answer

In your case you are defining the heights, therefore it is solved in the following way only by placing in the #click the height: auto; and removing the border of the class .re

var div = document.getElementById("click");
guessX = 0;
guessY = 0;

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

body,
html {
  padding: 0;
  margin: 0;
}

.re {
  height: 20px;
  width: 20px;
  background-color: black;
  cursor: pointer;

}

.re:hover {
  background-color: red;
}

#click {
  width: 500px;
  height: auto;
  border: 1px solid black;
  display: flex;
  flex-wrap: wrap;
}

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