outerPadding
See the KDoc of the overload with one Dp parameter for platform differences.
This delegates to the CSS margin property on JS DOM and adds the padding outside. For consistency on different platforms, please use it as the first modifier before the other modifiers such as background and clickable.
However, as CSS box-sizing doesn't have a margin-box value, when this is used with fillMaxSize/fillMaxWidth/fillMaxHeight on JS DOM the visual result may be not what you expect. In such a case, either replace it with fillMaxSizeStretch/fillMaxWidthStretch/fillMaxHeightStretch or use innerPadding on an outer parent instead.
Copy and render the following code to see the problem yourself:
<!DOCTYPE html>
<html>
<head>
<style>
.inner-div {
width: 100%;
height: 64px;
padding: 16px;
margin: 16px;
background: white;
border: 2px solid yellow;
box-sizing: border-box;
}
.outer-div {
background: orange;
border: 2px solid red;
padding: 16px;
}
</style>
</head>
<body>
<h1>box-sizing with margin</h1>
<p>In <code>.inner-div</code>, either remove <code>margin</code> or set <code>width</code> to <code>-webkit-fill-available</code>.
<br>
<div class="outer-div">
<div class="inner-div"></div>
</div>
<div>
</body>
</html>See the KDoc of the padding overload with one Dp parameter for more information.