Skip to content

Margin

The margin rule adds space around the entire widget. Margin may be specified with 1, 2 or 4 values.

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

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

Syntax

margin: <INTEGER>;
margin: <INTEGER> <INTEGER>;
margin: <INTEGER> <INTEGER> <INTEGER> <INTEGER>;

Example

In this example we add a large margin to some 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 MarginApp(App):
    def compose(self):
        yield Static(TEXT)


app = MarginApp(css_path="margin.css")
Screen {
    background: white;
    color: black;
}

Static {
    margin: 4 8;  
    background: blue 20%;  
    border: blue wide;
}    

MarginApp ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ 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 margin of 2 on the top and bottom edges, and 4 on the left and right */
margin: 2 4;

Python

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