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:

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:

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:

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:

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.^[1] The padding values goes in a clockwise motion as described above.

Example:

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!

The code for this:

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

Example #1:

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:

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:

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:

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:

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:

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:

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:

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>

References

Template:Reflist