How to reduce padding-top of content area on the Stack Overflow website

Question

I want to reduce the size of padding-top for the content area of the Stack Overflow website - using some custom CSS code applied using Tampermonkey.

The element I'm talking about is called div#content and currently padding-top is set to 24px. I want to reduce just this padding, but keeping the others the same.

Here is a minimal template using Tampermonkey:

// ==UserScript==
// @name        stackoverflow_reducepaddingtop
// @match       *://stackoverflow.com/*
// @grant       GM_addStyle
// @run-at      document-start
// ==/UserScript==

GM_addStyle ( ` ` );

Answer 1

Refer to:

• How to change a class CSS with a Greasemonkey/Tampermonkey script?
  and
• Understanding Style Precedence in CSS:

Your script was complete except for the actual CSS. So finished it is:

// ==UserScript==
// @name        stackoverflow_reducepaddingtop
// @match       *://stackoverflow.com/*
// @grant       GM_addStyle
// @run-at      document-start
// ==/UserScript==

GM_addStyle ( `#content {padding-top: 0px !important;}` );

---

---

Note that the !important; flag may not be needed for that exact selector (right now), but other CSS you could use does require it in a Stylus or GM_addStyle scenario. (Especially when using document-start.)