Box

<div style={{ backgroundColor: '#0B5FFF', color: 'white' }} className="p-1">
  padding: 4px (4px × 1 = 4px)
</div>

<div style={{ backgroundColor: '#0B5FFF', color: 'white' }} className="p-2">
  padding: 8px (4px × 2 = 8px)
</div>

<div style={{ backgroundColor: '#0B5FFF', color: 'white' }} className="p-3">
  padding: 12px (4px × 3 = 12px)
</div>

<div style={{ backgroundColor: '#0B5FFF', color: 'white' }} className="p-4">
  padding: 16px (4px × 4 = 16px)
</div>

<div style={{ backgroundColor: '#0B5FFF', color: 'white' }} className="p-15">
  padding: 60px (4px × 15 = 60px)
</div>

<div
  style={{ backgroundColor: '#0B5FFF', color: 'white' }}
  className="pl-1 pr-1 pb-1 pt-1"
>
  padding-left: 4px (4px × 1 = 4px) <br />
  padding-right: 4px (4px × 1 = 4px) <br />
  padding-bottom: 4px (4px × 1 = 4px) <br />
  padding-top: 4px (4px × 1 = 4px)
</div>

<div
  style={{ backgroundColor: '#0B5FFF', color: 'white' }}
  className="pl-2 pr-2 pb-2 pt-2"
>
  padding-left: 8px (4px × 2 = 8px) <br />
  padding-right: 8px (4px × 2 = 8px) <br />
  padding-bottom: 8px (4px × 2 = 8px) <br />
  padding-top: 8px (4px × 2 = 8px)
</div>

<div
  style={{ backgroundColor: '#0B5FFF', color: 'white' }}
  className="pl-3 pr-3 pb-3 pt-3"
>
  padding-left: 12px (4px × 3 = 12px) <br />
  padding-right: 12px (4px × 3 = 12px) <br />
  padding-bottom: 12px (4px × 3 = 12px) <br />
  padding-top: 12px (4px × 3 = 12px)
</div>

<div
  style={{ backgroundColor: '#0B5FFF', color: 'white' }}
  className="pl-4 pr-4 pb-4 pt-4"
>
  padding-left 16px: (4px × 4 = 16px) <br />
  padding-right 16px: (4px × 4 = 16px) <br />
  padding-bottom 16px: (4px × 4 = 16px) <br />
  padding-top: 16px (4px × 4 = 16px)
</div>

<div
  style={{ backgroundColor: '#0B5FFF', color: 'white' }}
  className="pl-5 pr-5 pb-5 pt-5"
>
  padding-left 20px: (4px × 5 = 20px) <br />
  padding-right 20px: (4px × 5 = 20px) <br />
  padding-bottom 20px: (4px × 5 = 20px) <br />
  padding-top 20px: (4px × 5 = 20px)
</div>

<div style={{ backgroundColor: '#0B5FFF', color: 'white' }} className="m-1">
  margin: 4px (4px × 1 = 4px)
</div>

<div style={{ backgroundColor: '#0B5FFF', color: 'white' }} className="m-2">
  margin: 8px (4px × 2 = 8px)
</div>

<div style={{ backgroundColor: '#0B5FFF', color: 'white' }} className="m-3">
  margin: 12px (4px × 3 = 12px)
</div>

<div style={{ backgroundColor: '#0B5FFF', color: 'white' }} className="m-4">
  margin: 16px (4px × 4 = 16px)
</div>

<div style={{ backgroundColor: '#0B5FFF', color: 'white' }} className="m-15">
  margin: 60px (4px × 15 = 60px)
</div>

<div
  style={{ backgroundColor: '#0B5FFF', color: 'white' }}
  className="ml-1 mr-1 mb-1 mt-1"
>
  margin-left: 4px (4px × 1 = 4px) <br />
  margin-right: 4px (4px × 1 = 4px) <br />
  margin-bottom: 4px (4px × 1 = 4px) <br />
  margin-top: 4px (4px × 1 = 4px)
</div>

<div
  style={{ backgroundColor: '#0B5FFF', color: 'white' }}
  className="ml-2 mr-2 mb-2 mt-2"
>
  margin-left: 8px (4px × 2 = 8px) <br />
  margin-right: 8px (4px × 2 = 8px) <br />
  margin-bottom: 8px (4px × 2 = 8px) <br />
  margin-top: 8px (4px × 2 = 8px)
</div>

<div
  style={{ backgroundColor: '#0B5FFF', color: 'white' }}
  className="ml-3 mr-3 mb-3 mt-3"
>
  margin-left: 12px (4px × 3 = 12px) <br />
  margin-right: 12px (4px × 3 = 12px) <br />
  margin-bottom: 12px (4px × 3 = 12px) <br />
  margin-top: 12px (4px × 3 = 12px)
</div>

<div
  style={{ backgroundColor: '#0B5FFF', color: 'white' }}
  className="ml-4 mr-4 mb-4 mt-4"
>
  margin-left: 16px (4px × 4 = 16px) <br />
  margin-right: 16px (4px × 4 = 16px) <br />
  margin-bottom: 16px (4px × 4 = 16px) <br />
  margin-top: 16px (4px × 4 = 16px)
</div>

<div
  style={{ backgroundColor: '#0B5FFF', color: 'white' }}
  className="ml-5 mr-5 mb-5 mt-5"
>
  margin-left: 20px (4px × 5 = 20px) <br />
  margin-right: 20px (4px × 5 = 20px) <br />
  margin-bottom: 20px (4px × 5 = 20px) <br />
  margin-top: 20px (4px × 5 = 20px)
</div>

<div
  style={{ backgroundColor: '#0B5FFF', color: 'white' }}
  className="mr-2 pl-3 pt-2 mt-15"
>
  margin-right: 8px (4px × 2 = 8px) <br />
  padding-left: 12px (4px × 3 = 12px) <br />
  padding-top: 8px (4px × 2 = 8px) <br />
  margin-top: 60px (4px × 15 = 60px)
</div>