Standardise on top margin for settings tabs

Different tabs in the settings dialog currently have slightly different layouts. The layouts should follow the same style so should look more similar. An example of the correct layout in the Sidebar tab can be found here. The fix should apply margin-top: 10px to .mx_SettingsTab_section in the CSS and verify each dialog tab to make sure it’s using the CSS correctly.

The updates need to be made to these tabs (current spacing listed for reference):

• General 10px
• Notifications 24px
• Preferences 20px
• Keyboard 20px
• Voice 10px
• Security 10px
• Labs 20px
• Help & About 24px

Appearance tab will need a slightly different approach as it has a subtitle so is out of scope for this task.

(If this is your first element-web task, please note that you should test the changes before submitting the PR for review.)

The different tabs currently look like this when laid out next to each other:

[dbkr]

There’s probably a broader scope of work that could be done here unifying all the dialogs into the same template & CSS, but I think we can fix this bug without doing that work by just tweaking the CSS in the the dialogs in react-sdk. This could be a good task for someone with CSS skills to get familiar with the codebase. @sahilsaini110 feel free to submit a PR for this if that sounds like something that would interest you.

[SimonBrandner]

I would like to work on this issue

Great! If you need any help/have any questions be sure to visit https://matrix.to/#/#element-dev:matrix.org!