Are you using the built-in Inspector to discover what needs modification? Right-click > Inspect will get you in there, and then you can figure out which element needs the space reduction.

Once you find the element with the unwanted margin or padding, you can use Stylus to counteract it. Style rules need to start with a selector that Firefox will use to apply the rule, using this format:

selector { property: value !important; }

For example:

body { padding-top: 0px !important; }

or

article { margin-top: -100px !important; }

The best selector to use for a rule will vary. If you have a tag like this:

<section id="main" class="2-column-left">

The best selector probably is #main (the ID, prefaced with #) because an ID is unique and should not have unexpected effects on other elements.

Sometimes an element doesn't have an ID so you need to work either with the tag itself (section) or the class (.2-column-left -- the class, prefaced with .).

If you share the details of the problem element, we may be able to suggest the best solution.

The first time I used the Inspector the class name was page, but the next time it was a long and complicated name with dots, I searched for the same property "margin-top".

It is possible the owner is making changes because can't access the page at this moment.

Will post screenshot of the inspector when I get access to the page.

Stylus doesn't like the negative number (check attachment).

After changing the top margin using the Box Model of the Inspector, searched for the negative value and found the responsible element. Both properties can change the margin size.

div class="content col-lg-9 col-md-9 col-sm-12 col-xs-12" style="top: -100px;margin-top: -75px;"

The way the class attribute works, each word (separated by a space) is a different class. Possibly the content class only exists once in the page (I have no idea what site we're talking about), so you could try:

.content { top: -100px; margin-top: -75px; }

Selected "URLs on the domain", which is not the default.

Used .page and it worked: .page { margin-top: -175px }

Then read your message and tried .content, which required a smaller value (-75px): .content { margin-top: -75px }

Also noticed that the add-on inserted the margin-top property for class page in another line, not the original line where page is defined.

It seems that Stylus is more about defining/specifying a property and using !important to supersede any previous definition, rather than finding its original definition (if any) and modifying it directly.

The element .content seems a good choice to try first with other websites.

There are no warnings or errors this time about expecting "{", but found "-175px".

Thanks for the help!

Note that in the question you wrote margin-top -100px with a missing colon (margin-top:) what wouldn't work anyway even if the !important flag would be required to override an existing rule.

• https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_and_edit_html/

Yes, searched for Stylus examples and saw different syntax/formatting, including one where there were no "{}" or ":", only indentation:

element [Tab]property value

Having something that works helps to understand the basics, even if it is one line.