jQuery可调整大小的元素，添加pading而不是height

Question

是否可以做这样的事情。我希望能够使用可调整大小的插件仅调整N / S元素的大小，但不是将高度应用于en元素，我想应用填充。

我目前的设置是：

<div id="container">
  <div class="wrapper"><div class="inner"><p>Text goes here"></p></div></div>
  <div class="wrapper"><div class="inner"><p>Text goes here"></p></div></div>
  <div class="wrapper"><div class="inner"><p>Text goes here"></p></div></div>
</div>


$("#container p").resizable({
    handles: "n, s",
    resize: function(event, ui) {
        var padding = ((ui.size.height - ui.originalSize.height) / 2);
        ui.element.css({
            'height': 'initial',
            'padding-top': padding + 'px',
            'padding-bottom': padding + 'px'
        });
    }
});

问题是我只能调整最后一个“p”元素，而不是第一个或中间元素。那是为什么？