Inset

Set the placement of positioned elements.

Widely available

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

Chrome

Edge

Firefox

Safari

i-0

inset: 0;

i-1

inset: .25rem;

i-2

inset: .5rem;

i-3

inset: .75rem;

i-4

inset: 1rem;

i-5

inset: 1.25rem;

i-6

inset: 1.5rem;

i-7

inset: 1.75rem;

i-8

inset: 2rem;

i-9

inset: 2.25rem;

i-10

inset: 2.5rem;

i-11

inset: 2.75rem;

i-12

inset: 3rem;

i-13

inset: 3.25rem;

i-14

inset: 3.5rem;

i-15

inset: 3.75rem;

i-16

inset: 4rem;

i-17

inset: 4.25rem;

i-18

inset: 4.5rem;

i-19

inset: 4.75rem;

i-20

inset: 5rem;

i-21

inset: 5.25rem;

i-22

inset: 5.5rem;

i-23

inset: 5.75rem;

i-24

inset: 6rem;

i-25

inset: 6.25rem;

i-26

inset: 6.5rem;

i-27

inset: 6.75rem;

i-28

inset: 7rem;

i-29

inset: 7.25rem;

i-30

inset: 7.5rem;

i-31

inset: 7.75rem;

i-32

inset: 8rem;

i-33

inset: 8.25rem;

i-34

inset: 8.5rem;

i-35

inset: 8.75rem;

i-36

inset: 9rem;

i-37

inset: 9.25rem;

i-38

inset: 9.5rem;

i-39

inset: 9.75rem;

i-40

inset: 10rem;

i-41

inset: 10.25rem;

i-42

inset: 10.5rem;

i-43

inset: 10.75rem;

i-44

inset: 11rem;

i-45

inset: 11.25rem;

i-46

inset: 11.5rem;

i-47

inset: 11.75rem;

i-48

inset: 12rem;

i-49

inset: 12.25rem;

i-50

inset: 12.5rem;

i-51

inset: 12.75rem;

i-52

inset: 13rem;

i-53

inset: 13.25rem;

i-54

inset: 13.5rem;

i-55

inset: 13.75rem;

i-56

inset: 14rem;

i-57

inset: 14.25rem;

i-58

inset: 14.5rem;

i-59

inset: 14.75rem;

i-60

inset: 15rem;

i-61

inset: 15.25rem;

i-62

inset: 15.5rem;

i-63

inset: 15.75rem;

i-64

inset: 16rem;

i-65

inset: 16.25rem;

i-66

inset: 16.5rem;

i-67

inset: 16.75rem;

i-68

inset: 17rem;

i-69

inset: 17.25rem;

i-70

inset: 17.5rem;

i-71

inset: 17.75rem;

i-72

inset: 18rem;

i-73

inset: 18.25rem;

i-74

inset: 18.5rem;

i-75

inset: 18.75rem;

i-76

inset: 19rem;

i-77

inset: 19.25rem;

i-78

inset: 19.5rem;

i-79

inset: 19.75rem;

i-80

inset: 20rem;

i-81

inset: 20.25rem;

i-82

inset: 20.5rem;

i-83

inset: 20.75rem;

i-84

inset: 21rem;

i-85

inset: 21.25rem;

i-86

inset: 21.5rem;

i-87

inset: 21.75rem;

i-88

inset: 22rem;

i-89

inset: 22.25rem;

i-90

inset: 22.5rem;

i-91

inset: 22.75rem;

i-92

inset: 23rem;

i-93

inset: 23.25rem;

i-94

inset: 23.5rem;

i-95

inset: 23.75rem;

i-96

inset: 24rem;

i-97

inset: 24.25rem;

i-98

inset: 24.5rem;

i-99

inset: 24.75rem;

i-100

inset: 25rem;

i-101

inset: 25.25rem;

i-102

inset: 25.5rem;

i-103

inset: 25.75rem;

i-104

inset: 26rem;

i-105

inset: 26.25rem;

i-106

inset: 26.5rem;

i-107

inset: 26.75rem;

i-108

inset: 27rem;

i-109

inset: 27.25rem;

i-110

inset: 27.5rem;

i-111

inset: 27.75rem;

i-112

inset: 28rem;

i-113

inset: 28.25rem;

i-114

inset: 28.5rem;

i-115

inset: 28.75rem;

i-116

inset: 29rem;

i-117

inset: 29.25rem;

i-118

inset: 29.5rem;

i-119

inset: 29.75rem;

i-120

inset: 30rem;

i-121

inset: 30.25rem;

i-122

inset: 30.5rem;

i-123

inset: 30.75rem;

i-124

inset: 31rem;

i-125

inset: 31.25rem;

i-126

inset: 31.5rem;

i-127

inset: 31.75rem;

i-128

inset: 32rem;

i-129

inset: 32.25rem;

i-130

inset: 32.5rem;

i-131

inset: 32.75rem;

i-132

inset: 33rem;

i-133

inset: 33.25rem;

i-134

inset: 33.5rem;

i-135

inset: 33.75rem;

i-136

inset: 34rem;

i-137

inset: 34.25rem;

i-138

inset: 34.5rem;

i-139

inset: 34.75rem;

i-140

inset: 35rem;

i-141

inset: 35.25rem;

i-142

inset: 35.5rem;

i-143

inset: 35.75rem;

i-144

inset: 36rem;

i-145

inset: 36.25rem;

i-146

inset: 36.5rem;

i-147

inset: 36.75rem;

i-148

inset: 37rem;

i-149

inset: 37.25rem;

i-150

inset: 37.5rem;

i-151

inset: 37.75rem;

i-152

inset: 38rem;

i-153

inset: 38.25rem;

i-154

inset: 38.5rem;

i-155

inset: 38.75rem;

i-156

inset: 39rem;

i-157

inset: 39.25rem;

i-158

inset: 39.5rem;

i-159

inset: 39.75rem;

i-160

inset: 40rem;

i-161

inset: 40.25rem;

i-162

inset: 40.5rem;

i-163

inset: 40.75rem;

i-164

inset: 41rem;

i-165

inset: 41.25rem;

i-166

inset: 41.5rem;

i-167

inset: 41.75rem;

i-168

inset: 42rem;

i-169

inset: 42.25rem;

i-170

inset: 42.5rem;

i-171

inset: 42.75rem;

i-172

inset: 43rem;

i-173

inset: 43.25rem;

i-174

inset: 43.5rem;

i-175

inset: 43.75rem;

i-176

inset: 44rem;

i-177

inset: 44.25rem;

i-178

inset: 44.5rem;

i-179

inset: 44.75rem;

i-180

inset: 45rem;

i-181

inset: 45.25rem;

i-182

inset: 45.5rem;

i-183

inset: 45.75rem;

i-184

inset: 46rem;

i-185

inset: 46.25rem;

i-186

inset: 46.5rem;

i-187

inset: 46.75rem;

i-188

inset: 47rem;

i-189

inset: 47.25rem;

i-190

inset: 47.5rem;

i-191

inset: 47.75rem;

i-192

inset: 48rem;

i-193

inset: 48.25rem;

i-194

inset: 48.5rem;

i-195

inset: 48.75rem;

i-196

inset: 49rem;

i-197

inset: 49.25rem;

i-198

inset: 49.5rem;

i-199

inset: 49.75rem;

i-200

inset: 50rem;

i-201

inset: 50.25rem;

i-202

inset: 50.5rem;

i-203

inset: 50.75rem;

i-204

inset: 51rem;

i-205

inset: 51.25rem;

i-206

inset: 51.5rem;

i-207

inset: 51.75rem;

i-208

inset: 52rem;

i-209

inset: 52.25rem;

i-210

inset: 52.5rem;

i-211

inset: 52.75rem;

i-212

inset: 53rem;

i-213

inset: 53.25rem;

i-214

inset: 53.5rem;

i-215

inset: 53.75rem;

i-216

inset: 54rem;

i-217

inset: 54.25rem;

i-218

inset: 54.5rem;

i-219

inset: 54.75rem;

i-220

inset: 55rem;

i-221

inset: 55.25rem;

i-222

inset: 55.5rem;

i-223

inset: 55.75rem;

i-224

inset: 56rem;

i-225

inset: 56.25rem;

i-226

inset: 56.5rem;

i-227

inset: 56.75rem;

i-228

inset: 57rem;

i-229

inset: 57.25rem;

i-230

inset: 57.5rem;

i-231

inset: 57.75rem;

i-232

inset: 58rem;

i-233

inset: 58.25rem;

i-234

inset: 58.5rem;

i-235

inset: 58.75rem;

i-236

inset: 59rem;

i-237

inset: 59.25rem;

i-238

inset: 59.5rem;

i-239

inset: 59.75rem;

i-240

inset: 60rem;

i-241

inset: 60.25rem;

i-242

inset: 60.5rem;

i-243

inset: 60.75rem;

i-244

inset: 61rem;

i-245

inset: 61.25rem;

i-246

inset: 61.5rem;

i-247

inset: 61.75rem;

i-248

inset: 62rem;

i-249

inset: 62.25rem;

i-250

inset: 62.5rem;

i-251

inset: 62.75rem;

i-252

inset: 63rem;

i-253

inset: 63.25rem;

i-254

inset: 63.5rem;

i-255

inset: 63.75rem;

i-256

inset: 64rem;

i-257

inset: 64.25rem;

i-258

inset: 64.5rem;

i-259

inset: 64.75rem;

i-260

inset: 65rem;

i-261

inset: 65.25rem;

i-262

inset: 65.5rem;

i-263

inset: 65.75rem;

i-264

inset: 66rem;

i-265

inset: 66.25rem;

i-266

inset: 66.5rem;

i-267

inset: 66.75rem;

i-268

inset: 67rem;

i-269

inset: 67.25rem;

i-270

inset: 67.5rem;

i-271

inset: 67.75rem;

i-272

inset: 68rem;

i-273

inset: 68.25rem;

i-274

inset: 68.5rem;

i-275

inset: 68.75rem;

i-276

inset: 69rem;

i-277

inset: 69.25rem;

i-278

inset: 69.5rem;

i-279

inset: 69.75rem;

i-280

inset: 70rem;

i-281

inset: 70.25rem;

i-282

inset: 70.5rem;

i-283

inset: 70.75rem;

i-284

inset: 71rem;

i-285

inset: 71.25rem;

i-286

inset: 71.5rem;

i-287

inset: 71.75rem;

i-288

inset: 72rem;

i-289

inset: 72.25rem;

i-290

inset: 72.5rem;

i-291

inset: 72.75rem;

i-292

inset: 73rem;

i-293

inset: 73.25rem;

i-294

inset: 73.5rem;

i-295

inset: 73.75rem;

i-296

inset: 74rem;

i-297

inset: 74.25rem;

i-298

inset: 74.5rem;

i-299

inset: 74.75rem;

i-300

inset: 75rem;

i-301

inset: 75.25rem;

i-302

inset: 75.5rem;

i-303

inset: 75.75rem;

i-304

inset: 76rem;

i-305

inset: 76.25rem;

i-306

inset: 76.5rem;

i-307

inset: 76.75rem;

i-308

inset: 77rem;

i-309

inset: 77.25rem;

i-310

inset: 77.5rem;

i-311

inset: 77.75rem;

i-312

inset: 78rem;

i-313

inset: 78.25rem;

i-314

inset: 78.5rem;

i-315

inset: 78.75rem;

i-316

inset: 79rem;

i-317

inset: 79.25rem;

i-318

inset: 79.5rem;

i-319

inset: 79.75rem;

i-320

inset: 80rem;

i-321

inset: 80.25rem;

i-322

inset: 80.5rem;

i-323

inset: 80.75rem;

i-324

inset: 81rem;

i-325

inset: 81.25rem;

i-326

inset: 81.5rem;

i-327

inset: 81.75rem;

i-328

inset: 82rem;

i-329

inset: 82.25rem;

i-330

inset: 82.5rem;

i-331

inset: 82.75rem;

i-332

inset: 83rem;

i-333

inset: 83.25rem;

i-334

inset: 83.5rem;

i-335

inset: 83.75rem;

i-336

inset: 84rem;

i-337

inset: 84.25rem;

i-338

inset: 84.5rem;

i-339

inset: 84.75rem;

i-340

inset: 85rem;

i-341

inset: 85.25rem;

i-342

inset: 85.5rem;

i-343

inset: 85.75rem;

i-344

inset: 86rem;

i-345

inset: 86.25rem;

i-346

inset: 86.5rem;

i-347

inset: 86.75rem;

i-348

inset: 87rem;

i-349

inset: 87.25rem;

i-350

inset: 87.5rem;

i-351

inset: 87.75rem;

i-352

inset: 88rem;

i-353

inset: 88.25rem;

i-354

inset: 88.5rem;

i-355

inset: 88.75rem;

i-356

inset: 89rem;

i-357

inset: 89.25rem;

i-358

inset: 89.5rem;

i-359

inset: 89.75rem;

i-360

inset: 90rem;

i-361

inset: 90.25rem;

i-362

inset: 90.5rem;

i-363

inset: 90.75rem;

i-364

inset: 91rem;

i-365

inset: 91.25rem;

i-366

inset: 91.5rem;

i-367

inset: 91.75rem;

i-368

inset: 92rem;

i-369

inset: 92.25rem;

i-370

inset: 92.5rem;

i-371

inset: 92.75rem;

i-372

inset: 93rem;

i-373

inset: 93.25rem;

i-374

inset: 93.5rem;

i-375

inset: 93.75rem;

i-376

inset: 94rem;

i-377

inset: 94.25rem;

i-378

inset: 94.5rem;

i-379

inset: 94.75rem;

i-380

inset: 95rem;

i-381

inset: 95.25rem;

i-382

inset: 95.5rem;

i-383

inset: 95.75rem;

i-384

inset: 96rem;

i-auto

inset: auto;

i-100%

inset: 100%;

i-50%

inset: 50%;

Responsiveness

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

Target viewport sizes with breakpoint prefixes.

@sm:i-(value)

Small≥640px

@md:i-(value)

Medium≥768px

@lg:i-(value)

Large≥1024px

@xxl:i-(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:i-(value)

Negative Values

Use negative variants to position in the opposite direction.

Use the -- syntax to apply negative numeric values.

Syntax:i--(value)

Inset

Widely available

i-(value)388 utilities

Responsiveness

Hover State

Negative Values