javascript - How do I calculate space between two elements? -

how can calculate amount of space between 1 element , next rendered element?

i want find out how space between specific hr , whatever shows below it. visually paragraph or heading or image or else, hr , next thing both nested within other blocks. so, "rendered element" mean next visible thing on page.

the reason need need insert element after hr, position: relative, , don't want shift content down unless space have shorter new element. if space shorter, want shift content down as necessary avoid covering content.

i don't have control on generation of html @ all. can add code generated page.

here's example of html i'm working with:

<div class="extra-wrapper">     <p>the line separates header rest of page below this.</p>     <hr> </div> <p class="top-p">     lorem ipsum dolor... </p>  

if that, snippet below might work, problem both element i'm starting , next element visible on page might nested within other blocks in unpredictable ways.

it occurs me next element might sibling. need check if $hr.next() has value, i'm not doing in snippet below.

$(function() {    var $header = $('#header');    var $hr = $header.siblings('.extra-wrapper').children('hr').filter(':first');    var $next_element = $hr.parent().next();      var extra_wrapper_bottom_margin = parseint($hr.parent().css('margin-bottom'));    var extra_wrapper_bottom_padding = parseint($hr.parent().css('padding-bottom'));      var hr_bottom_margin = parseint($hr.css('margin-bottom'));    var hr_bottom_padding = parseint($hr.css('padding-bottom'));      var next_element_top_margin = parseint($next_element.css('margin-top'));    var next_element_top_padding = parseint($next_element.css('padding-top'));      /* account collapsing vertical margins. */    var biggest_margin;    if (extra_wrapper_bottom_margin > hr_bottom_margin) {      biggest_margin = extra_wrapper_bottom_margin;    } else {      biggest_margin = hr_bottom_margin;    }      if (next_element_top_margin > biggest_margin) {      biggest_margin = next_element_top_margin;    }      var space_between = biggest_margin + hr_bottom_padding + extra_wrapper_bottom_padding + next_element_top_padding;      $('#space').val(space_between);  });

div.extra-wrapper {    padding: 0.5em 0;    margin-bottom: 1em;  }  div.extra_wrapper hr {    margin: 1em;  }  p.top-p {    margin: 1em;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="header">    <p>this header content.</p>  </div>  <div class="extra-wrapper">    <hr>  </div>  <p class="top-p">    lorem ipsum dolor...  </p>  <label>space:    <input id="space" type="text">  </label>

thank you.

how about:

next = function($el) {    while($el.length) {        var s = $el.next();      if (s.length) return s;      $el = $el.parent();    }  }    hr = $('hr');    alert(next(hr).offset().top - hr.offset().top)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    <section>  <div>    <div class="extra-wrapper">        <p>the line.... this.</p>        <hr>      </div>  </div>  </section>    <p class="top-p">      lorem ipsum dolor...  </p>