Skip to content

Padding

The padding rule adds space around the content of a widget. You can specify padding with 1, 2 or 4 numbers.

example
padding: 1; A single value sets a padding of 1 around all 4 edges
padding: 1 2; Two values sets the padding for the top/bottom and left/right edges
padding: 1 2 3 4; Four values sets top, right, bottom, and left padding independently

Padding may also be set individually by setting padding-top, padding-right, padding-bottom, or padding-left to a single value.

Syntax

padding: <INTEGER>;
padding: <INTEGER> <INTEGER>;
padding: <INTEGER> <INTEGER> <INTEGER> <INTEGER>;

Example

This example adds padding around static text.

from textual.app import App
from textual.widgets import Static

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):
    def compose(self):
        yield Static(TEXT)


app = PaddingApp(css_path="padding.css")
Screen {
    background: white;
    color: blue;
}

Static {
    padding: 4 8;  
    background: blue 20%;  
}    

PaddingApp 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.

CSS

/* Set padding of 2 on the top and bottom edges, and 4 on the left and right */
padding: 2 4;

Python

# In Python you can set the padding as a tuple of integers
widget.styles.padding = (2, 3)