paddingExample
@
safe @
()
=> label(.headingTheme, "Padding, margin and borders"),
()
=> label("To make the UI less cluttered, it's a good idea give it some space. You can utilize padding and " ~ "margin for this purpose. Both have the same meaning in Fluid as they have in HTML/CSS, if you're familiar " ~ "with web development."),
()
=> label("Both serve a similar purpose, but apply to a different part of the node: Padding is present on the " ~ "interior, margin, on the exterior. This is visible " ~ "when paired with background or borders. Padding will increase space covered by the background, whereas " ~ "margin will display completely outside of the node. Let's start by exemplifying usage of padding:"),
()
=> label("Note: It's not possible to change padding or margin using state-based styles, like the ones you can " ~ "use on a button.") Frame
paddingExample