<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<!-- bootstrap -->
<link href="../css/lib/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div style="padding:2mm;border-bottom:2px solid blue;">
</div>
</body>
</html>
https://i.sstatic.net/Xw8Hv.png
I am stumped on the negative height of the div.
If you have any tips or pointers, please share!
Edit:
console.log($("#1").outerHeight());
console.log($("#2").outerHeight());
console.log($("#3").outerHeight());<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c0a2afafb4b3b4b2a1b080f5eef0eef0eda2a5b4a1f2">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<style type="text/css">
</style>
</head>
<body>
<div id="1">
<div id="2">
<hr>
</div>
<div id="3">
<p>Text</p>
</div>
</div>
</body>
</html>