Fluentui: Dropdown: unnecessary margin-bottom: 10px

[mdahamiwal]

Bug Report

• __Package version(s)__: master
• __Browser and OS versions__: all

Priorities and help requested (not applicable if asking question):

Are you willing to submit a PR to fix? (Yes)

Requested priority: (Normal)

Products/sites affected: (if applicable)

Describe the issue:

Dropdown component has been assigned margin-botttom: 10px by default. A fabric component shouldn't assign external margins. If dropdown is put in a table column it breaks layout for other column elements.

https://github.com/OfficeDev/office-ui-fabric-react/blob/master/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.scss#L36-L42

[mdahamiwal]

@dzearing, any reason why we have margin-bottom: 10px on dropdown root element ?

[mikewheaton]

I suspect these styles are leftover from long ago. We used to have margins below all form elements to make it easy to assemble a form with consistent spacing between the elements. It's helpful in that one scenario but, as you've noted, it causes problems when the components are used elsewhere. I agree that no component should have margins on the root element.

[micahgodbolt]

yup...we should just wait for a big breaking change, and drop all the margins off of any root

[dzearing]

i 1000% agree with all of this, remove them all imo! (I didn't add them, they were ported from the original styling.)