Padding¶

The padding style specifies spacing around the content of a widget.

Syntax¶

padding: <integer> # one value for all edges | <integer> <integer> # top/bot left/right | <integer> <integer> <integer> <integer>; # top right bot left padding-top: <integer>; padding-right: <integer>; padding-bottom: <integer>; padding-left: <integer>;

The padding specifies spacing around the content of a widget, thus this spacing is added inside the widget. The values of the <integer> determine how much spacing is added and the number of values define what edges get what padding:

1 <integer> sets the same padding for the four edges of the widget;
2 <integer> set padding for top/bottom and left/right edges, respectively.
4 <integer> set padding for the top, right, bottom, and left edges, respectively.

Tip

To remember the order of the edges affected by the rule padding when it has 4 values, think of a clock. Its hand starts at the top and then goes clockwise: top, right, bottom, left.

Alternatively, padding can be set for each edge individually through the rules padding-top, padding-right, padding-bottom, and padding-left, respectively.

Example¶

Basic usage¶

This example adds padding around some text.

Outputpadding.pypadding.tcss

from textual.app import App
from textual.widgets import Label

TEXT = """I must not fear.
Fear is the mind-killer.
Fear is the little-death that brings total obliteration.
I will face my fear.
I will permit it to pass over me and through me.
And when it has gone past, I will turn the inner eye to see its path.
Where the fear has gone there will be nothing. Only I will remain."""


class PaddingApp(App):
    CSS_PATH = "padding.tcss"

    def compose(self):
        yield Label(TEXT)


if __name__ == "__main__":
    app = PaddingApp()
    app.run()

Screen {
    background: white;
    color: blue;
}

Label {
    padding: 4 8;
    background: blue 20%;
    width: 100%;