0

I'd like to set negative "padding-top" to .container element using jQuery.
Value for padding-top will be the sum of .header element and .navigation element.

I tried code below but it didn't work.

//This don't work
const $headerHeight = $('.header').height();
const $navHeight = $('.nav').height();
$('.container').css('padding-top', -($headerHeight + $navHeight) + 'px');

It works while it's not negative value.
It adds style="padding-top: xxxpx" to .container like below
div class="container" style="padding-top: xxxpx"

//This works
const $headerHeight = $('.header').height();
const $navHeight = $('.nav').height();
$('.container').css('padding-top', ($headerHeight + $navHeight) + 'px');

I'd like to know how to write in case of "negative value".

abms
  • 545
  • 1
  • 3
  • 13

1 Answers1

2

Padding cannot be negative: Unlike margin properties, values for padding values cannot be negative.

CSS Box Model Module Level 3 specs: Negative values for padding properties are invalid.

nonopolarity
  • 146,324
  • 131
  • 460
  • 740