When we talk about margins and padding, we're talking about spacing - we want to spread out the different sections of your blog design, so everything's not all squished together. Remember that your blog is made up of three main sections: the header-wrapper, the main-wrapper, and the sidebar-wrapper, which all fit into the outer-wrapper. To sum it up:
Margins are outside. They are the space between parts of your design. If the margin of your main-wrapper is 15px, then there will be 15px of empty space between your main posting area and your sidebar, where your blog background might show through.
Padding is the space inside. If the padding of your main-wrapper is 15px, then there will be 15px of extra space around the text of your posts.
It's easiest to explain with a diagram:
On the far right of this diagram, we've illustrated what happens when your padding is zero - the text will go right up against the side of that section of your blog. Of course, this is more noticable when there's a border around your sidebar or posting area.
Let's talk numbers. We usually measure margins and padding in pixels, or px. When you're dealing with margins between your main and sidebar wrappers, you want to make sure you don't make them too wide. Use this formula:
If you just got lost, remember that the main-wrapper is the code that represents your main blog column, and the outer-wrapper is the overall section that includes both your main wrapper and sidebar. We learned how to change the widths in this tutorial.
What happens if your margins are too wide? If those first four widths add up to a number greater than your outer-wrapper width, the sidebar won't have enough room and will wind up at the bottom of your blog. That's no fun!
When you add margins or padding to your blog design, you can do it with several lines of code, or just a few. For example,
Let's look at an example.
"Auto" is the default margin - if you don't specify a number, then your computer will decide for you. Here, the outer-wrapper margin is 0 auto 0 auto; which means that the top and bottom margins will be 0px and the left and right margins will be equal - it'll end up in the center! Like we said, you don't have to type in "auto" - it's just the automatic setting that stays until you change the numbers.
Notice that the margin-right of the main wrapper is 20px, and the margin-left of the sidebar is 30px. That adds up to 50px of extra space in between the two sections. We filled up the extra pixels with padding: 30px total for the main wrapper, and 20 for the sidebar wrapper. Add up all the margins and widths, and you get 1000px - the same as our outer-wrapper! It's perfect.
All of the top margins are 0 in this example. You won't usually use really weird numbers for top and bottom margins, but you can play around with it if you want.
What's the difference between margins and padding? Well, it's easiest to see if you have a border around that section of your blog - padding goes inside the border, and margins go outside. The other main difference that you might be interested to know is that margins can have negative values, but padding can't. Experiment!
As always, if you have any questions, please feel free to email us at writethegeeks@hotmail.com.
Margins are outside. They are the space between parts of your design. If the margin of your main-wrapper is 15px, then there will be 15px of empty space between your main posting area and your sidebar, where your blog background might show through.
Padding is the space inside. If the padding of your main-wrapper is 15px, then there will be 15px of extra space around the text of your posts.
It's easiest to explain with a diagram:
Let's talk numbers. We usually measure margins and padding in pixels, or px. When you're dealing with margins between your main and sidebar wrappers, you want to make sure you don't make them too wide. Use this formula:
main-wrapper width
+ main-wrapper margins/padding
+ sidebar width
+ sidebar margins/padding
____________________________
= outer wrapper width.
If you just got lost, remember that the main-wrapper is the code that represents your main blog column, and the outer-wrapper is the overall section that includes both your main wrapper and sidebar. We learned how to change the widths in this tutorial.
What happens if your margins are too wide? If those first four widths add up to a number greater than your outer-wrapper width, the sidebar won't have enough room and will wind up at the bottom of your blog. That's no fun!
When you add margins or padding to your blog design, you can do it with several lines of code, or just a few. For example,
margin-top:0px;can become
margin-right:10px;
margin-bottom:0px;
margin-left:5px;
margin: 0px 10px 0px 5px;Those numbers set the margins in clockwise order: top, right, bottom, left. It works the same way for padding.
Let's look at an example.
#outer-wrapper {Here, we chose an easy number for the outer-wrapper: 1000px. The main-wrapper is 700 px, and the sidebar-wrapper is 200, so that leaves an extra 100px left over for margins. (This is probably a little too much space, but we wanted to keep the math easy).
width: 1000px;
margin:0 auto;
padding:10px 10px 0 10px;
text-align:$startSide;
font: $bodyfont;
background:#ffffff;
}
#main-wrapper {
width: 700px;
float:$startSide;
margin: 0 20px 0 0;
background:white;
padding: 0 15px 0 15px;
border:1px dotted #bb1d07;
border-bottom:1px dotted #bb1d07;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
#sidebar-wrapper {
width: 200px;
background: transparent;
float: $startSide;
padding:0 10px 0 10px;
margin: 0 0 0 30px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
"Auto" is the default margin - if you don't specify a number, then your computer will decide for you. Here, the outer-wrapper margin is 0 auto 0 auto; which means that the top and bottom margins will be 0px and the left and right margins will be equal - it'll end up in the center! Like we said, you don't have to type in "auto" - it's just the automatic setting that stays until you change the numbers.
Notice that the margin-right of the main wrapper is 20px, and the margin-left of the sidebar is 30px. That adds up to 50px of extra space in between the two sections. We filled up the extra pixels with padding: 30px total for the main wrapper, and 20 for the sidebar wrapper. Add up all the margins and widths, and you get 1000px - the same as our outer-wrapper! It's perfect.
All of the top margins are 0 in this example. You won't usually use really weird numbers for top and bottom margins, but you can play around with it if you want.
What's the difference between margins and padding? Well, it's easiest to see if you have a border around that section of your blog - padding goes inside the border, and margins go outside. The other main difference that you might be interested to know is that margins can have negative values, but padding can't. Experiment!
As always, if you have any questions, please feel free to email us at writethegeeks@hotmail.com.
very helpful Ashlyn- I finally understand! lol (;
ReplyDeleteI've awarded you with the Versatile Blogger award. You can pick it up right here.
ReplyDelete