Padding

WikiText does **not** function in the comments. To test out your coding, please either visit your sandbox or this page's talk page.

Quick Code

Copy to clipboard <div style="padding: 5px 5px;">CONTENT</div>

## Introduction

**Padding** is an HTML, CSS, and WikiText attribute that changes the space between the borders of your badge/template and its content. It's a must-have if you want your badge to look nice. Padding can also be used if an image is being tricky, or you need to do some quick formatting!

## Padding Code

Here is an example of the same text with and without padding:

With Padding
Without padding

Do you notice the difference?
The code for this: (Using `div` style:)

```
<div style="border: 1px dotted red; padding: 5px 5px">With Padding</div>
```

(Using `span` style:)

```
<span style="border: 1px dotted red; padding: 5px 5px">With Padding</span>
```

You can use two number inputs to get the ideal padding; one for the padding on the left and right, and one for the padding on the top and bottom. You can't really see padding if you don't have a border, which is why borders were included in these examples.

**NOTE**: Sometimes padding is confused with centering, it is NOT centering. Use a <center> tag AFTER your style tag, BEFORE the text you want centered to center text.

## Top, Bottom, Left, Right

Padding can also have a padding top, padding bottom, padding left and padding right to it. Let's take a look at an example of padding top first.

### **Padding Top**

Padding top is how far away the text is from the top, kind of like margin. You can use padding top by using this code:
```
<div style="padding-top:__px">Text goes here.</div>
```

An example:

See how this is farther from the line above it?
The code I used:

```
<div style="padding-top:15px">See how this is farther from the line above it?</div>
```

### **Padding Bottom**

Padding bottom is how far away the text is from the bottom. You can use padding bottom by using this code:
```
<div style="padding-bottom:__px">Text goes here.</div>
```

An example:

See how this is farther from the line below it?
The code I used:

```
<div style="padding-bottom:15px">See how this is farther from the line below it?</div>
```

### **Padding Left**

Padding left is how far away the text is from the left. You can use padding left by using this code:
```
<div style="padding-left:__px">Text goes here.</div>
```

An example:

See how this is farther from the line to the left of it?
The code I used:

```
<div style="padding-left:15px">See how this is far from the line to the left of it?</div>
```

### **Padding Right**

Padding right is how far away the text is from the right. You can use padding right by using this code:
```
<div style="padding-right:__px">Text goes here.</div>
```

An example:

You can't really see this, but it's actually there! You should see it when you use it.
The code I used:

```
<div style="padding-right:15px">You can't really see this, but it's there! You should see it when you use it.</div>
```

## Shorthand

Shorthands are a format of writing some attributes so that several different Attributes combines to make one attribute that is easier to remember, read and write. Some attributes have shorthands while others have not so if you're not sure, just use the ones you know. The padding shorthand can be used to specify **all four sides in one single line**.

The shorthand for padding is as below:

```
padding: 25px 50px 75px 100px;

```

For the example above: top padding is 25px, right padding is 50px, bottom padding is 75px, left padding is 100px. The padding values goes in a **clockwise** motion as described above.

Example:

Text goes here.
The code I used:

```
<div style="border: 2px solid magenta; padding: 10px 40px 20px 5px;">Text goes here.</div>
```

## Examples

**Editors, please feel free to add to this!**

Text here
The code for this:

```
<div style="border: 2px double red; padding: 30px 30px; background: aqua;">Text here</div>
```

Example #1:

Text Here
The code for this:

```
<div style="background: linear-gradient(#0B1459, #952FAF); color: white; padding: 10px 10px; border-radius: 20px 50px; font-family: 'Coiny', sans-serif;">Text Here</div>
```

Example #2:

Text here
The code for this:

```
<div style="border: 5px dotted gold; padding: 80px; background: radial-gradient(orange, purple, deeppink, hotpink, pink, lime);font-family: 'Cherry Cream Soda', sans-serif;">Text here</div>
```

Example #3:

Text here
The code for this:

```
<div style="border: 2px dashed black; border-radius: 12px; background: linear-gradient(25deg, red, orange, yellow, green, blue, purple);font-family: 'Chewy', sans-serif; color: black; padding: 21px 20px;">Text here</div>
```

Example #4:

Text here
The code for this:

```
<div style="border: 10px double purple; border-radius: 35px; background: linear-gradient(to bottom right, magenta, lime, cyan, blue); font-family: 'Lobster', cursive; color: black; padding: 10px 10px;">Text here</div>
```

Example #5:

Text here
The code for this:

```
<div style="border: 5px solid; border-image: linear-gradient(to top left, yellow, magenta) 9; height: 150px; padding: 5px; font-family: 'Caveat', cursive; padding: 20px 20px; background: linear-gradient(to bottom right, orange, purple); color: white;">Text here</div>
```

Example #6:

Text here
The code for this:

```
<div style="border: 5px solid; border-image: linear-gradient(to bottom right, #1034A6, #412F88, #722B6A, #A2264B, #D3212D, #F62D2D) 9; height: 150px; padding: 5px; font-family: 'Lexend Zetta', sans-serif; padding: 15px 15px; background: radial-gradient(#1034A6, #412F88, #722B6A, #A2264B, #D3212D, #F62D2D, black); color: white;">Text here</div>
```

Example #7:

Text!

Text!

Text!

Text!

Text!

The code for this:

```
<div style="background: radial-gradient(#FFB964, #FF8B00, #2066BB, #72C2F0, #FFD7EB, #FFA2DC); background-size: 70px 70px; color: black; font-family: 'Neucha', sans-serif; color: #edff00ff; padding: 20px 20px; border: 5px dashed #edff00ff;">
Text!

Text!

Text!

Text!

Text!
</div>
```

Example #7:

Text!

The code for this:

```
<div style="background: linear-gradient(#3581D8, #63CAD8, #D82E3F, #FFE135, #FFF44F, #28CC2D); color: white; padding: 10px 10px; border-radius: 40px 70px; font-family: 'Ubuntu Condensed', sans-serif;">
Text!</div>
```