Need to remove Safari's automatic margins around buttons

[angella-qian]

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

Describe in detail the issue you're having.

Safari places an automatic 2px margin around all buttons and this needs to be removed because it's causing some misalignments (see screenshot below)

Is this issue related to a specific component?

This issue is related to the Button component

What did you expect to happen? What happened instead? What would you like to
see changed?

Expect no automatic margins around buttons throughout the application, as seen in other browsers Chrome/Firefox/Edge

What browser are you working in?

Safari 12.1.1 (14607.2.6.1.1)

What version of the Carbon Design System are you using?

carbon-components: ^10.7.4,
carbon-components-react: ^7.7.4,

What offering/product do you work on? Any pressing ship or release dates we
should be aware of?

Watson Assistant

Steps to reproduce the issue

1. Open reduced test case in a Safari browser
2. Right click on 'Hello world' button > Inspect Element
3. Navigate to Computed tab
4. Scroll all the way down and see Box Model of button with 2px margin all around

Please create a reduced test case in CodeSandbox

https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/react/examples/codesandbox

Additional information

Auto margin causes right-side misalignment of 'Create intent' on an intents page:

Related pr:
https://github.ibm.com/watson-engagement-advisor/wea-conversational-ui/pull/6006

Related issue:
https://github.ibm.com/watson-engagement-advisor/wea-backlog/issues/33926

[tw15egan]

PR is up to remove this: #5169

Temporary fix:

  @media not all and (min-resolution: 0.001dpcm) {
    @supports (-webkit-appearance: none) {
      .bx--btn {
        margin: 0;
      }
    }