Quicker creating and editing of margin and padding

At present, setting margin and padding on a single element requires a minimum of 24 clicks and keystrokes, as each one has to be opened, edited and closed individually.

It would be a great timesaver to be able to open a dialogue that presented all values at once to be edited by simply tabbing through. An even bigger improvement would be the ability to link horizontal and vertical values - the equivalent of setting

margin: 5px, 10px; or padding: 1em;

rather than

margin: 5px 10px 5px 10px; or padding: 1em 1em 1em 1em;

You could also add a keyboard shortcut to the dialogue to make it extra easy :)

  • Martin
  • Jan 18 2017
  • Zacaria Wilson commented
    13 May 06:26pm

    If you prefer to enter the values via keyboard input, there is a way to do what you're looking for. Change one value then press either Shift + Enter to change all values to match or Alt + Enter to change just the opposite value (i.e. top & bottom, left & right). However, it's totally unclear that this is an option. I think the value control popup interface should include "Set All" or "Set Both Sides" controls like the "Reset" control below the values, with the associate shortcut.

  • Diarmuid Sexton commented
    5 Apr, 2017 03:54pm

    But yes, tabbing through the padding / margin values - i.e. when the top margin setting is open, pressing tab would take you to the right, then bottom, then left - in a clockwise motion. This would be the same for the padding.

  • Martin commented
    19 Jan, 2017 09:36am

    Good to know, thanks! I prefer to type the values I'm after but that's still very handy.

  • Diarmuid Sexton commented
    18 Jan, 2017 12:01pm

    The link between the horizontal and vertical values already exists.

    If you hold down "shift" while changing the padding or margin, it affects all sides. or hold down "alt" and drag to change the vertical or the horizontal padding / margin.

  • +2