Skip to content
Yumma CSS Logo Yumma CSS Logo Yumma CSS
Blog
Yumma CSS 3.0 — All new CLI, utilities, and more 🎉

Padding

Controls the padding of an element.

Utility Properties
Error: 429

This example sets the padding to 2rem. The element will have uniform padding inside it.

6

 
<div id="area">
  <div class="p-8">
    <p class="bg-indigo tc-white p-6">6</p>
  </div>
</div>

Padding Bottom

Controls the bottom padding of an element.

Utility Properties
Error: 429

This example sets the bottom padding to 2rem. The element will have space inside it at the bottom.

6

 
<div id="area">
  <div class="p-8">
    <p class="bg-indigo tc-white pb-6">6</p>
  </div>
</div>

Padding Left

Controls the left padding of an element.

Utility Properties
Error: 429

This example sets the left padding to 2rem. The element will have space inside it on the left side.

6

 
<div id="area">
  <div class="p-8">
    <p class="bg-indigo tc-white pl-6">6</p>
  </div>
</div>

Padding Right

Controls the right padding of an element.

Utility Properties

pr-0

 padding-right: 0rem;

pr-1

 padding-right: 0.25rem;

pr-2

 padding-right: 0.5rem;

pr-3

 padding-right: 0.75rem;

pr-4

 padding-right: 1rem;

pr-5

 padding-right: 1.25rem;

pr-6

 padding-right: 1.5rem;

pr-7

 padding-right: 1.75rem;

pr-8

 padding-right: 2rem;

pr-9

 padding-right: 2.25rem;

pr-10

 padding-right: 2.5rem;

pr-11

 padding-right: 2.75rem;

pr-12

 padding-right: 3rem;

pr-13

 padding-right: 3.25rem;

pr-14

 padding-right: 3.5rem;

pr-15

 padding-right: 3.75rem;

pr-16

 padding-right: 4rem;

pr-17

 padding-right: 4.25rem;

pr-18

 padding-right: 4.5rem;

pr-19

 padding-right: 4.75rem;

pr-20

 padding-right: 5rem;

pr-21

 padding-right: 5.25rem;

pr-22

 padding-right: 5.5rem;

pr-23

 padding-right: 5.75rem;

pr-24

 padding-right: 6rem;

pr-25

 padding-right: 6.25rem;

pr-26

 padding-right: 6.5rem;

pr-27

 padding-right: 6.75rem;

pr-28

 padding-right: 7rem;

pr-29

 padding-right: 7.25rem;

pr-30

 padding-right: 7.5rem;

pr-31

 padding-right: 7.75rem;

pr-32

 padding-right: 8rem;

pr-33

 padding-right: 8.25rem;

pr-34

 padding-right: 8.5rem;

pr-35

 padding-right: 8.75rem;

pr-36

 padding-right: 9rem;

pr-37

 padding-right: 9.25rem;

pr-38

 padding-right: 9.5rem;

pr-39

 padding-right: 9.75rem;

pr-40

 padding-right: 10rem;

pr-41

 padding-right: 10.25rem;

pr-42

 padding-right: 10.5rem;

pr-43

 padding-right: 10.75rem;

pr-44

 padding-right: 11rem;

pr-45

 padding-right: 11.25rem;

pr-46

 padding-right: 11.5rem;

pr-47

 padding-right: 11.75rem;

pr-48

 padding-right: 12rem;

pr-49

 padding-right: 12.25rem;

pr-50

 padding-right: 12.5rem;

pr-51

 padding-right: 12.75rem;

pr-52

 padding-right: 13rem;

pr-53

 padding-right: 13.25rem;

pr-54

 padding-right: 13.5rem;

pr-55

 padding-right: 13.75rem;

pr-56

 padding-right: 14rem;

pr-57

 padding-right: 14.25rem;

pr-58

 padding-right: 14.5rem;

pr-59

 padding-right: 14.75rem;

pr-60

 padding-right: 15rem;

pr-61

 padding-right: 15.25rem;

pr-62

 padding-right: 15.5rem;

pr-63

 padding-right: 15.75rem;

pr-64

 padding-right: 16rem;

pr-65

 padding-right: 16.25rem;

pr-66

 padding-right: 16.5rem;

pr-67

 padding-right: 16.75rem;

pr-68

 padding-right: 17rem;

pr-69

 padding-right: 17.25rem;

pr-70

 padding-right: 17.5rem;

pr-71

 padding-right: 17.75rem;

pr-72

 padding-right: 18rem;

pr-73

 padding-right: 18.25rem;

pr-74

 padding-right: 18.5rem;

pr-75

 padding-right: 18.75rem;

pr-76

 padding-right: 19rem;

pr-77

 padding-right: 19.25rem;

pr-78

 padding-right: 19.5rem;

pr-79

 padding-right: 19.75rem;

pr-80

 padding-right: 20rem;

pr-81

 padding-right: 20.25rem;

pr-82

 padding-right: 20.5rem;

pr-83

 padding-right: 20.75rem;

pr-84

 padding-right: 21rem;

pr-85

 padding-right: 21.25rem;

pr-86

 padding-right: 21.5rem;

pr-87

 padding-right: 21.75rem;

pr-88

 padding-right: 22rem;

pr-89

 padding-right: 22.25rem;

pr-90

 padding-right: 22.5rem;

pr-91

 padding-right: 22.75rem;

pr-92

 padding-right: 23rem;

pr-93

 padding-right: 23.25rem;

pr-94

 padding-right: 23.5rem;

pr-95

 padding-right: 23.75rem;

pr-96

 padding-right: 24rem;

pr-97

 padding-right: 24.25rem;

pr-98

 padding-right: 24.5rem;

pr-99

 padding-right: 24.75rem;

pr-100

 padding-right: 25rem;

pr-auto

 padding-right: auto;

This example sets the right padding to 2rem. The element will have space inside it on the right side.

6

 
<div id="area">
  <div class="p-8">
    <p class="bg-indigo tc-white pr-6">6</p>
  </div>
</div>

Padding Top

Controls the top padding of an element.

Utility Properties
Error: 429

This example sets the top padding to 2rem. The element will have space inside it at the top.

6

 
<div id="area">
  <div class="p-8">
    <p class="bg-indigo tc-white pt-6">6</p>
  </div>
</div>

Padding Block End

Controls the logical block end padding of an element, which maps to a physical padding depending on the element’s writing mode, directionality, and text orientation.

Utility Properties
Error: 429

This example sets the bottom padding to 2rem. The element will have space inside it at the bottom in a vertical writing mode.

6

 
<div id="area">
  <div class="p-8">
    <p class="bg-indigo tc-white pbe-6">6</p>
  </div>
</div>

Padding Block Start

Controls the logical block start padding of an element, which maps to a physical padding depending on the element’s writing mode, directionality, and text orientation.

Utility Properties
Error: 429

This example sets the top padding to 2rem. The element will have space inside it at the top in a vertical writing mode.

6

 
<div id="area">
  <div class="p-8">
    <p class="bg-indigo tc-white pbs-6">6</p>
  </div>
</div>

Padding Inline End

Controls the logical inline end padding of an element, which maps to a physical padding depending on the element’s writing mode, directionality, and text orientation.

Utility Properties
Error: 429

This example sets the right padding to 2rem. The element will have space inside it on the right side in a horizontal writing mode.

6

 
<div id="area">
  <div class="p-8">
    <p class="bg-indigo tc-white pie-6">6</p>
  </div>
</div>

Padding Inline Start

Controls the logical inline start padding of an element, which maps to a physical padding depending on the element’s writing mode, directionality, and text orientation.

Utility Properties
Error: 429

This example sets the left padding to 2rem. The element will have space inside it on the left side in a horizontal writing mode.

6

 
<div id="area">
  <div class="p-8">
    <p class="bg-indigo tc-white pis-6">6</p>
  </div>
</div>

Padding X

Controls the left and right paddings of an element at once.

Utility Properties
Error: 429

This example sets the left and right padding to 2rem. The element will have uniform space on both sides inside it.

6

 
<div id="area">
  <div class="p-8">
    <p class="bg-indigo tc-white px-6">6</p>
  </div>
</div>

Padding Y

Controls the bottom and top paddings of an element at once.

Utility Properties
Error: 429

This example sets the bottom and top to 2rem. The element will have uniform space above and below its content.

6

 
<div id="area">
  <div class="p-8">
    <p class="bg-indigo tc-white py-6">6</p>
  </div>
</div>

Conditional styles

Learn how to override existing utilities based on the user’s screen size or other factors, such as hover states.

Media modifier

You can combine responsive breakpoints like sm:-*,md:-*, lg:-*, and xxl:-* allows targeting specific utilities in different viewports. 

<div class="p-1 md:p-2 ..."></div>

Hover modifier

Alternatively, you can apply :hover by using h:-* utility to override elements and change their values when hovering over them. 

<div class="p-1 h:p-2 ..."></div>