LayoutCSS Docs Showcase
  • Showcase
  • components

  • Area
  • Box
  • Center
  • Extender
  • Grid
  • Icon
  • Ledge
  • Outsider
  • Rack
  • Sidebar
  • Slider
  • Stack
  • Switcher
  • Utilities

  • align-self
  • bg-img
  • flex
  • font-size
  • h
  • hide
  • line-height
  • p-child
  • p-recursive
  • p
  • ratio
  • relative
  • w
  • z-index
  • p-recursive

    ...

    The p-recursive utility lets you define a padding on all the descendants (children, grand-children, grand-grand-children etc.).

    Just like the utility p, you can choose the kind of padding, so if you set px-recusive="3" all the descendants of the element will receive an horizontal padding of 3.

    You can use the following p-recursive attributes :

    • p-recursive : define a padding in every direction.
    • px-recursive : define an horizontal padding.
    • py-recursive : define vertical padding.
    • pt-recursive : define padding-top.
    • pb-recursive : define padding-bottom.
    • pl-recursive : define padding-left.
    • pr-recursive : define padding-right.

    Examples:

    Hey

    Guys !

    I also inherit of the padding

    Hey

    Guys !

    I also inherit of the padding

    Hey

    Guys !

    I also inherit of the padding

    Hey

    Guys !

    I also inherit of the padding

    Hey

    Guys !

    I also inherit of the padding