Get height of element and use it in css

Question

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.

Answer 1

$('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
})

Answer 2

var height = $("#yourelement").outerHeight();
$("#parent").css('margin-top', height);

You can use the 'css' method to apply styles to the elements.