first of all, why not create the 4 inputs in a grid? inspiration: https://codepen.io/radibit/pen/LVzgvP

https://our.umbraco.com/documentation/getting-started/backoffice/property-editors/built-in-property-editors/grid-layout/settings-and-styles

The documentation says you don't need the key attributes - that is what cause your padding not to be applied. The next thing is that you need to save the unit also (the px).

For anyone interested in how to do this...

Create the plugin folder & files as follows:

Next, create a new data type from the Grid Property editor in developer section, then click the edit link below 'Styles':

Add the following snippet in the dialogue, and save it...

 {
    "label": "Padding",
    "description": "Specify the padding for this component.",
    "key": "padding",
    "view": "/App_Plugins/GridSettingsPaddingEditor/view.html",
    "defaultConfig": {
      "padding": {
        "top": {
          "icon": "icon-arrow-up",
          "text": "Top",
          "value": 0
        },
        "right": {
          "icon": "icon-arrow-right",
          "text": "Right",
          "value": 0
        },
        "bottom": {
          "icon": "icon-arrow-down",
          "text": "Bottom",
          "value": 0
        },
        "left": {
          "icon": "icon-arrow-left",
          "text": "Left",
          "value": 0
        }
      }
    }
  }

Next, we add the controller code to the gridSettingsPaddingEditor.controller.js file:

angular.module('umbraco').controller('grid.settings.paddingeditor.controller', 
    function ($scope, $http, $routeParams, assetsService, contentResource, notificationsService) {

        assetsService.loadCss('/App_Plugins/GridSettingsPaddingEditor/styles.css');
        $scope.padding = $scope.model.defaultConfig ? $scope.model.defaultConfig.padding : $scope.model.config.padding;



    if ($scope.model.value) {
        var tempValues = '0 0 0 0';
        if ($scope.model.value.length === 0) {
            $scope.model.value = tempValues;
        } else {
            tempValues = $scope.model.value.replace(/px/g, '');
        }
        var values = tempValues.split(' ');

        $scope.padding.top.value = isNaN(values[0]) ? 0 : Number(values[0]);
        $scope.padding.right.value = isNaN(values[1]) ? 0 : Number(values[1]);
        $scope.padding.bottom.value = isNaN(values[2]) ? 0 : Number(values[2]);
        $scope.padding.left.value = isNaN(values[3]) ? 0 : Number(values[3]);

    }



    $scope.change = function () {
        $scope.model.value = '';
        if ($scope.padding.top.value === 0 && $scope.padding.right.value === 0 && $scope.padding.bottom.value === 0 && $scope.padding.left.value === 0) {
            return;
        } else {
            $scope.model.value = 
                $scope.padding.top.value + 'px ' + 
                $scope.padding.right.value + 'px ' + 
                $scope.padding.bottom.value + 'px ' + 
                $scope.padding.left.value + 'px';
        }
    };
});

Then, we code up the view....

<div ng-controller="grid.settings.paddingeditor.controller">

    <table cellpadding="0" cellspacing="0">
        <tr>
            <td style="text-align: right; padding-right: 20px;">
                <label>
                    <i class="{{padding.top.icon}}" ng-show="padding.top.icon"></i>{{padding.top.text}}
                    <input style="width: 60px;" type="number" ng-model="padding.top.value" ng-change="change()"/>px
                </label>

            </td>
            <td style="text-align:right">
                <label>
                    <i class="{{padding.right.icon}}" ng-show="padding.right.icon"></i>{{padding.right.text}}
                    <input style="width: 60px;" type="number" ng-model="padding.right.value" ng-change="change()"/>px
                </label>

            </td>
        </tr>
        <tr>
            <td style="text-align: right; padding-right: 20px;">
                <label>
                    <i class="{{padding.bottom.icon}}" ng-show="padding.bottom.icon"></i>{{padding.bottom.text}}
                    <input style="width: 60px;" type="number" ng-model="padding.bottom.value" ng-change="change()"/>px
                </label>

            </td>
            <td style="text-align:right">
                <label>
                    <i class="{{padding.left.icon}}" ng-show="padding.left.icon"></i>{{padding.left.text}}
                    <input style="width: 60px;" type="number" ng-model="padding.left.value" ng-change="change()"/>px
                </label>

            </td>
        </tr>
    </table>

</div>

Finally, we fillout the package.manisfest file...

{
  "gridEditors": [
    {
      "name": "Grid Settings Padding Editor",
      "alias": "gridSettingsPaddingEditor",
      "view": "~/App_Plugins/GridSettingsPaddingEditor/view.html",
      "icon": "",
      "editor": {
        "valueType": "string",
        "view": "~/App_Plugins/GridSettingsPaddingEditor/view.html"
      }
    }
  ],
  "javascript": [
    "~/App_Plugins/GridSettingsPaddingEditor/gridsettingspaddingeditor.controller.js"
  ],
  "css": [
    "~/App_Plugins/GridSettingsPaddingEditor/styles.css"
  ]
}

Now you can add your new grid layout data type to your doc type, and after clicking the gear in the top right of the row/column, you will see your new settings editor....

And the rendered output looks like this...

I get that the view could be done better (not using tables... I know, I was pressed for time) Hope this helps others too.

.

.

(For SEO)

Custom Grid Editor

Multiple Style editors

is working on a reply...