Padding

Set the padding for an element.

Widely available

This feature is well established and works across many devices and browser versions.

Chrome

Edge

Firefox

Safari

p-0

padding: 0;

p-1

padding: .25rem;

p-2

padding: .5rem;

p-3

padding: .75rem;

p-4

padding: 1rem;

p-5

padding: 1.25rem;

p-6

padding: 1.5rem;

p-7

padding: 1.75rem;

p-8

padding: 2rem;

p-9

padding: 2.25rem;

p-10

padding: 2.5rem;

p-11

padding: 2.75rem;

p-12

padding: 3rem;

p-13

padding: 3.25rem;

p-14

padding: 3.5rem;

p-15

padding: 3.75rem;

p-16

padding: 4rem;

p-17

padding: 4.25rem;

p-18

padding: 4.5rem;

p-19

padding: 4.75rem;

p-20

padding: 5rem;

p-21

padding: 5.25rem;

p-22

padding: 5.5rem;

p-23

padding: 5.75rem;

p-24

padding: 6rem;

p-25

padding: 6.25rem;

p-26

padding: 6.5rem;

p-27

padding: 6.75rem;

p-28

padding: 7rem;

p-29

padding: 7.25rem;

p-30

padding: 7.5rem;

p-31

padding: 7.75rem;

p-32

padding: 8rem;

p-33

padding: 8.25rem;

p-34

padding: 8.5rem;

p-35

padding: 8.75rem;

p-36

padding: 9rem;

p-37

padding: 9.25rem;

p-38

padding: 9.5rem;

p-39

padding: 9.75rem;

p-40

padding: 10rem;

p-41

padding: 10.25rem;

p-42

padding: 10.5rem;

p-43

padding: 10.75rem;

p-44

padding: 11rem;

p-45

padding: 11.25rem;

p-46

padding: 11.5rem;

p-47

padding: 11.75rem;

p-48

padding: 12rem;

p-49

padding: 12.25rem;

p-50

padding: 12.5rem;

p-51

padding: 12.75rem;

p-52

padding: 13rem;

p-53

padding: 13.25rem;

p-54

padding: 13.5rem;

p-55

padding: 13.75rem;

p-56

padding: 14rem;

p-57

padding: 14.25rem;

p-58

padding: 14.5rem;

p-59

padding: 14.75rem;

p-60

padding: 15rem;

p-61

padding: 15.25rem;

p-62

padding: 15.5rem;

p-63

padding: 15.75rem;

p-64

padding: 16rem;

p-65

padding: 16.25rem;

p-66

padding: 16.5rem;

p-67

padding: 16.75rem;

p-68

padding: 17rem;

p-69

padding: 17.25rem;

p-70

padding: 17.5rem;

p-71

padding: 17.75rem;

p-72

padding: 18rem;

p-73

padding: 18.25rem;

p-74

padding: 18.5rem;

p-75

padding: 18.75rem;

p-76

padding: 19rem;

p-77

padding: 19.25rem;

p-78

padding: 19.5rem;

p-79

padding: 19.75rem;

p-80

padding: 20rem;

p-81

padding: 20.25rem;

p-82

padding: 20.5rem;

p-83

padding: 20.75rem;

p-84

padding: 21rem;

p-85

padding: 21.25rem;

p-86

padding: 21.5rem;

p-87

padding: 21.75rem;

p-88

padding: 22rem;

p-89

padding: 22.25rem;

p-90

padding: 22.5rem;

p-91

padding: 22.75rem;

p-92

padding: 23rem;

p-93

padding: 23.25rem;

p-94

padding: 23.5rem;

p-95

padding: 23.75rem;

p-96

padding: 24rem;

p-97

padding: 24.25rem;

p-98

padding: 24.5rem;

p-99

padding: 24.75rem;

p-100

padding: 25rem;

p-101

padding: 25.25rem;

p-102

padding: 25.5rem;

p-103

padding: 25.75rem;

p-104

padding: 26rem;

p-105

padding: 26.25rem;

p-106

padding: 26.5rem;

p-107

padding: 26.75rem;

p-108

padding: 27rem;

p-109

padding: 27.25rem;

p-110

padding: 27.5rem;

p-111

padding: 27.75rem;

p-112

padding: 28rem;

p-113

padding: 28.25rem;

p-114

padding: 28.5rem;

p-115

padding: 28.75rem;

p-116

padding: 29rem;

p-117

padding: 29.25rem;

p-118

padding: 29.5rem;

p-119

padding: 29.75rem;

p-120

padding: 30rem;

p-121

padding: 30.25rem;

p-122

padding: 30.5rem;

p-123

padding: 30.75rem;

p-124

padding: 31rem;

p-125

padding: 31.25rem;

p-126

padding: 31.5rem;

p-127

padding: 31.75rem;

p-128

padding: 32rem;

p-129

padding: 32.25rem;

p-130

padding: 32.5rem;

p-131

padding: 32.75rem;

p-132

padding: 33rem;

p-133

padding: 33.25rem;

p-134

padding: 33.5rem;

p-135

padding: 33.75rem;

p-136

padding: 34rem;

p-137

padding: 34.25rem;

p-138

padding: 34.5rem;

p-139

padding: 34.75rem;

p-140

padding: 35rem;

p-141

padding: 35.25rem;

p-142

padding: 35.5rem;

p-143

padding: 35.75rem;

p-144

padding: 36rem;

p-145

padding: 36.25rem;

p-146

padding: 36.5rem;

p-147

padding: 36.75rem;

p-148

padding: 37rem;

p-149

padding: 37.25rem;

p-150

padding: 37.5rem;

p-151

padding: 37.75rem;

p-152

padding: 38rem;

p-153

padding: 38.25rem;

p-154

padding: 38.5rem;

p-155

padding: 38.75rem;

p-156

padding: 39rem;

p-157

padding: 39.25rem;

p-158

padding: 39.5rem;

p-159

padding: 39.75rem;

p-160

padding: 40rem;

p-161

padding: 40.25rem;

p-162

padding: 40.5rem;

p-163

padding: 40.75rem;

p-164

padding: 41rem;

p-165

padding: 41.25rem;

p-166

padding: 41.5rem;

p-167

padding: 41.75rem;

p-168

padding: 42rem;

p-169

padding: 42.25rem;

p-170

padding: 42.5rem;

p-171

padding: 42.75rem;

p-172

padding: 43rem;

p-173

padding: 43.25rem;

p-174

padding: 43.5rem;

p-175

padding: 43.75rem;

p-176

padding: 44rem;

p-177

padding: 44.25rem;

p-178

padding: 44.5rem;

p-179

padding: 44.75rem;

p-180

padding: 45rem;

p-181

padding: 45.25rem;

p-182

padding: 45.5rem;

p-183

padding: 45.75rem;

p-184

padding: 46rem;

p-185

padding: 46.25rem;

p-186

padding: 46.5rem;

p-187

padding: 46.75rem;

p-188

padding: 47rem;

p-189

padding: 47.25rem;

p-190

padding: 47.5rem;

p-191

padding: 47.75rem;

p-192

padding: 48rem;

p-193

padding: 48.25rem;

p-194

padding: 48.5rem;

p-195

padding: 48.75rem;

p-196

padding: 49rem;

p-197

padding: 49.25rem;

p-198

padding: 49.5rem;

p-199

padding: 49.75rem;

p-200

padding: 50rem;

p-201

padding: 50.25rem;

p-202

padding: 50.5rem;

p-203

padding: 50.75rem;

p-204

padding: 51rem;

p-205

padding: 51.25rem;

p-206

padding: 51.5rem;

p-207

padding: 51.75rem;

p-208

padding: 52rem;

p-209

padding: 52.25rem;

p-210

padding: 52.5rem;

p-211

padding: 52.75rem;

p-212

padding: 53rem;

p-213

padding: 53.25rem;

p-214

padding: 53.5rem;

p-215

padding: 53.75rem;

p-216

padding: 54rem;

p-217

padding: 54.25rem;

p-218

padding: 54.5rem;

p-219

padding: 54.75rem;

p-220

padding: 55rem;

p-221

padding: 55.25rem;

p-222

padding: 55.5rem;

p-223

padding: 55.75rem;

p-224

padding: 56rem;

p-225

padding: 56.25rem;

p-226

padding: 56.5rem;

p-227

padding: 56.75rem;

p-228

padding: 57rem;

p-229

padding: 57.25rem;

p-230

padding: 57.5rem;

p-231

padding: 57.75rem;

p-232

padding: 58rem;

p-233

padding: 58.25rem;

p-234

padding: 58.5rem;

p-235

padding: 58.75rem;

p-236

padding: 59rem;

p-237

padding: 59.25rem;

p-238

padding: 59.5rem;

p-239

padding: 59.75rem;

p-240

padding: 60rem;

p-241

padding: 60.25rem;

p-242

padding: 60.5rem;

p-243

padding: 60.75rem;

p-244

padding: 61rem;

p-245

padding: 61.25rem;

p-246

padding: 61.5rem;

p-247

padding: 61.75rem;

p-248

padding: 62rem;

p-249

padding: 62.25rem;

p-250

padding: 62.5rem;

p-251

padding: 62.75rem;

p-252

padding: 63rem;

p-253

padding: 63.25rem;

p-254

padding: 63.5rem;

p-255

padding: 63.75rem;

p-256

padding: 64rem;

p-257

padding: 64.25rem;

p-258

padding: 64.5rem;

p-259

padding: 64.75rem;

p-260

padding: 65rem;

p-261

padding: 65.25rem;

p-262

padding: 65.5rem;

p-263

padding: 65.75rem;

p-264

padding: 66rem;

p-265

padding: 66.25rem;

p-266

padding: 66.5rem;

p-267

padding: 66.75rem;

p-268

padding: 67rem;

p-269

padding: 67.25rem;

p-270

padding: 67.5rem;

p-271

padding: 67.75rem;

p-272

padding: 68rem;

p-273

padding: 68.25rem;

p-274

padding: 68.5rem;

p-275

padding: 68.75rem;

p-276

padding: 69rem;

p-277

padding: 69.25rem;

p-278

padding: 69.5rem;

p-279

padding: 69.75rem;

p-280

padding: 70rem;

p-281

padding: 70.25rem;

p-282

padding: 70.5rem;

p-283

padding: 70.75rem;

p-284

padding: 71rem;

p-285

padding: 71.25rem;

p-286

padding: 71.5rem;

p-287

padding: 71.75rem;

p-288

padding: 72rem;

p-289

padding: 72.25rem;

p-290

padding: 72.5rem;

p-291

padding: 72.75rem;

p-292

padding: 73rem;

p-293

padding: 73.25rem;

p-294

padding: 73.5rem;

p-295

padding: 73.75rem;

p-296

padding: 74rem;

p-297

padding: 74.25rem;

p-298

padding: 74.5rem;

p-299

padding: 74.75rem;

p-300

padding: 75rem;

p-301

padding: 75.25rem;

p-302

padding: 75.5rem;

p-303

padding: 75.75rem;

p-304

padding: 76rem;

p-305

padding: 76.25rem;

p-306

padding: 76.5rem;

p-307

padding: 76.75rem;

p-308

padding: 77rem;

p-309

padding: 77.25rem;

p-310

padding: 77.5rem;

p-311

padding: 77.75rem;

p-312

padding: 78rem;

p-313

padding: 78.25rem;

p-314

padding: 78.5rem;

p-315

padding: 78.75rem;

p-316

padding: 79rem;

p-317

padding: 79.25rem;

p-318

padding: 79.5rem;

p-319

padding: 79.75rem;

p-320

padding: 80rem;

p-321

padding: 80.25rem;

p-322

padding: 80.5rem;

p-323

padding: 80.75rem;

p-324

padding: 81rem;

p-325

padding: 81.25rem;

p-326

padding: 81.5rem;

p-327

padding: 81.75rem;

p-328

padding: 82rem;

p-329

padding: 82.25rem;

p-330

padding: 82.5rem;

p-331

padding: 82.75rem;

p-332

padding: 83rem;

p-333

padding: 83.25rem;

p-334

padding: 83.5rem;

p-335

padding: 83.75rem;

p-336

padding: 84rem;

p-337

padding: 84.25rem;

p-338

padding: 84.5rem;

p-339

padding: 84.75rem;

p-340

padding: 85rem;

p-341

padding: 85.25rem;

p-342

padding: 85.5rem;

p-343

padding: 85.75rem;

p-344

padding: 86rem;

p-345

padding: 86.25rem;

p-346

padding: 86.5rem;

p-347

padding: 86.75rem;

p-348

padding: 87rem;

p-349

padding: 87.25rem;

p-350

padding: 87.5rem;

p-351

padding: 87.75rem;

p-352

padding: 88rem;

p-353

padding: 88.25rem;

p-354

padding: 88.5rem;

p-355

padding: 88.75rem;

p-356

padding: 89rem;

p-357

padding: 89.25rem;

p-358

padding: 89.5rem;

p-359

padding: 89.75rem;

p-360

padding: 90rem;

p-361

padding: 90.25rem;

p-362

padding: 90.5rem;

p-363

padding: 90.75rem;

p-364

padding: 91rem;

p-365

padding: 91.25rem;

p-366

padding: 91.5rem;

p-367

padding: 91.75rem;

p-368

padding: 92rem;

p-369

padding: 92.25rem;

p-370

padding: 92.5rem;

p-371

padding: 92.75rem;

p-372

padding: 93rem;

p-373

padding: 93.25rem;

p-374

padding: 93.5rem;

p-375

padding: 93.75rem;

p-376

padding: 94rem;

p-377

padding: 94.25rem;

p-378

padding: 94.5rem;

p-379

padding: 94.75rem;

p-380

padding: 95rem;

p-381

padding: 95.25rem;

p-382

padding: 95.5rem;

p-383

padding: 95.75rem;

p-384

padding: 96rem;

p-auto

padding: auto;

p-px

padding: 1px;

Responsiveness

Use breakpoint prefixes to target different screen sizes. Styles apply from the breakpoint & up.

Target viewport sizes with breakpoint prefixes.

@sm:p-(value)

Small≥640px

@md:p-(value)

Medium≥768px

@lg:p-(value)

Large≥1024px

@xxl:p-(value)

Extra Large≥1536px

Hover State

Apply styles conditionally on hover using the h: prefix.

Add the h: prefix to apply styles only when the user hovers over the element.

Syntax:h:p-(value)

Negative Values

Use negative variants to apply negative padding values.

Use the -- syntax to apply negative numeric values.

Syntax:p--(value)

Padding

Widely available

p-(value)387 utilities

Responsiveness

Hover State

Negative Values