Tessisamess

Layouts, Codes, Tutorials, & Resources

Hey there, I'm Tess!

Welcome to my blog; I make lots of different layouts, codes, tutorials, and other resources for Insanejournal and Dreamwidth RPers! There's a lot to choose from and brand new content goes up every week!

Take a look around, and don't hesitate to ask for help if you need it!

Can't get enough resources? Why not subscribe to my Patreon for exclusive monthly content, or support the creation of more content by leaving a tip on Ko-Fi! ♡

Need an invite?

If you're unable to comment on my journal to ask for help now that anon has been turned off due to serious spam issues, don't worry! Just shoot me an email and I'll send you an invite code for Insanejournal. I've got plenty to spare!
×

Please Note:

I do not offer assistance with any sites other than IJ and DW unless it is for general HTML and CSS (ie. custom hosted pages and similar.) I cannot convert a code to a new site's rules because there are a lot of niche RP sites, and I have no way of knowing each one's limitations and caveats. Sorry about that!

Layout By

Powered by InsaneJournal

Hey there, I'm Tess!

Welcome to my blog; I make lots of different layouts, codes, tutorials, and other resources for Insanejournal and Dreamwidth RPers! There's a lot to choose from and brand new content goes up every week!

Take a look around, and don't hesitate to ask for help if you need it!

Can't get enough resources? Why not subscribe to my Patreon for exclusive monthly content, or support the creation of more content by leaving a tip on Ko-Fi! ♡

Need an invite?

If you're unable to comment on my journal to ask for help now that anon has been turned off due to serious spam issues, don't worry! Just shoot me an email and I'll send you an invite code for Insanejournal. I've got plenty to spare!
×

December 2018

S M T W T F S
      1
2345678
9101112131415
16171819202122
23242526272829
3031     

Please Note:

I do not offer assistance with any sites other than IJ and DW unless it is for general HTML and CSS (ie. custom hosted pages and similar.) I cannot convert a code to a new site's rules because there are a lot of niche RP sites, and I have no way of knowing each one's limitations and caveats. Sorry about that!

Layout By

Powered by InsaneJournal
Previous | Next

Margin vs Padding: How to use them!




So you're having trouble with the difference between margin and padding? No worries!

Margin and padding can be confusing; they're similar but not the same, so it's easy to get turned around and wind up with unexpected results. In this tutorial we'll go through the basics of margin and padding, what they're for, and how to use them. This is a CSS basic, so it's pretty vital to your designs, but it's also pretty simple once you get the hang of it. This tutorial won't be overly long, so let's jump right in!

What is margin?

Your margin is the space around an element. This means it is outside of that element and is not a direct part of it, so things like borders and backgrounds won't effect it. Negative values are allowed.
This element has a margin of 50px and no padding

What is padding?

Your padding is the space around an element's content. This means it is inside of that element and will take on the background color of that element, and things like borders will sit outside of that padding. Negative values are not allowed.

This element has a padding of 50px and no margin


Cool! But... how do I use them?

With margin and padding you can define the amount of space with px, em, %, vh, vw, pt, cm, etc.

You can use negative values with margins whereas you cannot with padding. You can also use auto with margins, which will horizontally center an element, but will not vertically center it. margin:0 auto; is the simplest way to center content on a page, and is a value you will commonly see in stylesheets.

There are a few ways to set your padding and margin. These specifications will work for either margin or padding, so you can swap out "margin" for "padding" in any of these and it will be the right way to write it:

Setting each side individually:
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

Setting it with shorthand:
Shorthand saves space, time, and generally looks nicer, but ordering does matter, so keep that in mind!

margin:
10px;
will set all four margins to 10px

margin:
10px 20px;
will set the top and bottom to 10px and the left and right to 20px

margin:
10px 20px 30px;
will set the top to 10px, the left and right to 20px, and the bottom to 30px

margin:
10px 20px 10px 20px;
will set the top to 10px, the right to 20px, the bottom to 10px, and the left to 20px


Let's see it in action!

Here we have a simple example of three divs that all have a margin of 50px and a padding of 40px.

Notice how the padding fills out all four sides of the div around its content, while the margin spaces things at an even 50px rather than doubling up where the margins meet each other. If two elements with margin:50px; sit next to each other the meeting margins will not double to equal 100px. They will halve to make a total of 50px instead, ensuring the amount of space you want between elements is correct.
Div #1
Div #2
Div #3
Let's take a look at two more examples!

This div has a width of 65%, a padding of 40px, and a margin of 50px auto
This div has a padding of 70px 30px, and a margin of 40px 90px

♡ You're Done! ♡

Comments

Sep. 1st, 2018 06:56 pm (UTC)
THIS IS EXACTLY WHAT WE NEEDED! Thank you so muuuuuch!
Sep. 1st, 2018 08:25 pm (UTC)
This is fantastic!!
Sep. 1st, 2018 09:05 pm (UTC)
thank you so much for this!!!!
Sep. 6th, 2018 09:01 am (UTC)
Amazing!