jqueryouterheight

Get height of element and use it in css

I have an div element on my page that contains a p element.

<div class="parent-div">

    <p>Here's some text</p>

</div>

I'm trying to get the outer height of the p element, and then use that number to apply a margin to the parent element.

e.g if the height of the p element is 346px, then I'd like to apply a 346px margin-top to the parent div.

I can get the height using jQuery's outerHeight(), but I have no idea how to use that number to apply a margin to the parent element.

Any advice is much appreciated.

Solution 
  • $('p').each(function(){//for each paragraph
   $(this).parent().css("margin-top", $(this).outerHeight() +"px");
   //change its parent   margin-top   with the current p's outerHeight
})