This is a simple HTML page with 2 points and a line connecting the points, added using jQuery.

The result is that the line has no connecting points, but the line is offset for some reason.

function drawLine(){

    const line_ = $("<div>", { class: "line" });
    const p1 = $("#point1");
    var p1T = p1.position().top;
    var p1L = p1.css("left");

    // set line top equal to point1 top
    var lineT = p1T + "px";

    line_.css ({
        width: length + "px",
        transform: `rotate(${angle}rad)`,
        top: lineT,
        left: p1L
    });

    p1.parent().append(line_);
 }

// Get the elements representing the two points you want to draw a line between
 const point1 = document.getElementById('point1');
 const point2 = document.getElementById('point2');
 
 // Calculate the coordinates of the two points
 const point1Rect = point1.getBoundingClientRect();
 const point2Rect = point2.getBoundingClientRect();
 
 // Calculate the length and angle of the line
 const length = Math.sqrt((point2Rect.left - point1Rect.left) ** 2 + (point2Rect.top - point1Rect.top) ** 2);
 const angle = Math.atan2(point2Rect.top - point1Rect.top, point2Rect.left - point1Rect.left);

 drawLine();

 

#line-container {
  position: relative;
  border: 1px solid blue;
}

.line {
  position: absolute;
  height: 2px;
  background-color: aqua;
  margin: 0px;
}

.point{
  position: absolute; 
  margin: 0px;
  
}

#point1{
  background-color: red;
  top: 100px; 
  left: 100px; 
  width: 10px; 
  height: 10px;
}
#point2{
  background-color: blue;
  top: 200px; 
  left: 300px; 
  width: 10px; 
  height: 10px;
}

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <div id="line-container">
    <div id="point1" class="point"></div>
    <div id="point2" class="point"></div>
  </div>

The line and 2 points have position:absolute;, so top and left are relative to the container. p>

margin Also set all 3 to zero

The line top is set to the point1 top, but the line is above point1.

why is that?