CSS Chrome developer tool use inactive checkbox as CSS?

In the Inspector, right-click on the parent element in which the checkbox is to be inserted. In the opening context menu there is an option Edit HTML or the like. Select this, then you can insert the HTML code for a checkbox.

Note that this change (just as with CSS changes) is not persistent. After reloading the page, the element disappears from the DOM.

(…) but then everywhere is the margin zero (…)

Look again, if you do margin-Property has changed the right CSS rule. Your description sounds more like you didn’t. After all, the rule only refers to certain buttons.

In the inspector, see which selector the CSS rule with the margin-Property uses (in your screenshot this would be the first line). You could find the line that needs to be adjusted later. However, I would rather choose a way of solving where you overwrite the rule with your own (new added) rule. The original code does not have to be changed.

As a overwrite rule, a selector of the same name would be sufficient:

#cookie-notice .cn-button:not(.cn-button-custom) {
  margin: 0
}

He has the same Specificity, but if it is loaded/insert according to the original rule.

If your change would affect other elements unintentionally, you would have to formulate a selector that only affects your element. On SelfHTML explains which types of selectors exist. You can combine them with each other.

WordPress now offers different ways to edit CSS. Either via the Theme Editor, via Customizer or by editing the theme files explicitly (for this you need file access, e.g. via FTP). As a last alternative, there are still various plugins, which I really do not think is necessary. On kinsta all these paths are described in more detail.