Deviant Login Shop
 Join deviantART for FREE Take the Tour
×

:iconginkgografix: More from ginkgografix


More from deviantART



Details

Submitted on
May 22, 2013
Submitted with
Sta.sh Writer
Link
Thumb

Stats

Views
2,571 (2 today)
Favourites
73 (who?)
Comments
14
×

How to: Margin + Padding

Wed May 22, 2013, 4:19 AM
For this tutorial series I am explaining different elements you can create or modify with the help of CSS. The level of experience that is needed to be able to understand the tutorials can differ and will be in no order.
However I will try to explain the things as simple as possible. Upcoming questions should be left in a comment directly to this blog so that people with similar problems can look them up later as well.

----

The tutorial series is based on the gruze-structure of journals. If you are still using the old structure or have a journal installed that used it, things won’t work the same way like explained below.
For simple skins the old structure is fine, but the more features you add, the more I would recommend using the gruze-structure. You can look up the differences here: ginkgografix.deviantart.com/ar…  






It seems like a lot of people are struggling with the usage of margin and padding. In the end it doesn’t matter how you get to the result you want, but the more you understand what is going on behind, the cleaner your code will be and the less you need to fix it here and there.
It also prevents you from going crazy, because the code is so bloated that you aren’t able to find something special later again.



The Basics


Padding and margin are essential and work no matter what browser, no matter what resolution, no matter whatever. They are basic CSS and are responsible for spacing within your designs.

There is this one thing you should always keep in mind:
Margin is for the outside, padding is for the inside!


That means that margin moves everything away from an element and padding adds some invisible fluffy cotton to make things bigger than they actually are (like in your bra or pants).

Sounds confusing? Well take a look at the image below, it should help you to understand what I mean.

Boxmodel by ginkgografix
The light blue arrows are the spacing that can be in-/decreased with the help of padding. They only work between the border and the content of an element – no matter if those are visible or not.
The dark blue arrows are the spacing that can be in-/decreased with the help of margin. They will move other elements away or get them closer together.



What does it mean for our journal



What you see here is a regular journal without any extra CSS code. There is just the plain text and a part of that is wrapped in a p-tag.
Looking at it without backgrounds, images etc it looks like nothing happened here, right?
Wrong!

Bild1 by ginkgografix



With the help of Firebug (or similar tools) we can take a look behind the visible. These are just a few examples. Everything purple is padding, everything yellow is margin.
Those are default settings by dA – and the reason why some of your designs might not look like they should even though you didn’t change anything.


Bild2 by ginkgografix
(highlighting .text)


Bild3 by ginkgografix
(higlighting .gr-top .gr)


Bild4 by ginkgografix
(highlighting a paragraph)


As you can see there is already quite a bit of margin and padding involved. For example by default .text has this defined padding: 15px 15px 37px 33px;, which explains why the space at the left side is always bigger than on the right side.

For .gr-top .gr we already have padding: 0 64px 4px 8px;.

And the p-tag we used comes with a margin as well. While the values above are defined by dA, the values for the p-tag (like for any other basic tag) is defined by HTML itself.
Because of that you won’t be able to look up the default settings with the help of Firebug. Those values are kind of universal and won’t be mentioned extra.

It’s like when you use em, i, b or anything else like that. They all come with special pre-defined characteristics.
At www.w3.org/TR/CSS2/sample.html you can find a list of some elements and what is defined for them for HTML 4 (I haven’t checked how accurate it is though).



What to keep in mind


Some things you should remember every time you work with margin or padding. Can be a lifesaver sometimes!

  • You can work with negative values for margin to decrease the space between certain elements, but not for padding. 
  • If you define a height/width and add a padding browsers will act different. For Firefix the final height/width will be the defined one + the padding.
    In contrast to that will the Internet Explorer mainly care for the height/width value and move your content within that given space.

    Example:
    You have defined a height of 100px and a width of 100px. For the top and bottom you have 10px, while for the sides you have 15px.

    That means for FF your element gets a height of 120px (100+10+10) and for the width you get 130px (100+15+15). For IE it will both stay 100px.

    To avoid this problem and to have a similar result everywhere try to avoid height/width value in combination with padding. Instead just work with padding to bloat the element until you get the dimensions that are needed.
  • Margin and padding are fundamental for coding your layout, but it should be used wisely, always depending on the elements you are working with.
  • When working with padding and fixed dimensions always make sure that your elements like image (which come with fixed dimensions as well) still will fit!




Examples



Below are some simple examples of how you can modify your elements with the help of margin and padding.

For all examples we work within the content area only and use the following HTML code:
<h1>Lorem ipsum dolor</h1>
<p>sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
At vero eos et accusam et justo duo dolores et ea rebum.
<blockquote>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </blockquote>


Without any extra work done by us, it will look like this:

Bild5 by ginkgografix




Example 1



For our first example we increase the spacing for the headline for the top and bottom. That way we make sure that no element will get squeezed to it, no matter how the HTML code is structured.
Also we add a border and move the actual text about 5px away from it. Otherwise it would be directly next to each other.

For blockquote we decide that it should fill the entire width of our journal and get the result with the help of negative margin. Additionally we increase the spacing for the top.
Remember those padding values for the left and right side from .text? Those are the ones we have been working with here to make sure the blockquote goes from one side to the other.
That’s why it is always good to know or to look up such default settings.


Bild6 by ginkgografix

The code we are using:
h1{
margin: 20px 0;
padding: 0 0 0 5px;
border-left: 5px solid #16598f;}

blockquote{
background: #16598f;
color: #fff;
padding: 10px;
margin: 50px -15px 0 -33px;}




Example 2



Here we unify the overall layout a bit more. First of all we define a new padding for .text to get equal spacing for all four sides.
Afterwards we decrease the bottom spacing for the headline, so that the actual text comes a bit closer. There is no visual gap now anymore, but therefore we have that border.

We also remove the outer spacing of the paragraph and the blockquote, so that they both align with the other elements. But to still give the blockquote a bit more exposure and to stand out, we add a border and move the content via padding a bit more to the inside.

Bild7 by ginkgografix

The CSS code:
.text{padding: 30px;}

h1{
margin: 0 0 -15px 0;
border-bottom: 2px solid;}

p{
margin: 0;}

blockquote{
margin: 0;
padding: 30px;
border: 1px solid #16598f;}




Example 3



For our last example we make the headline a bit more prominent. We increase the spacing for the top and the bottom, but also make sure that the border won’t stick to the text. That way the actual text stands out a bit more than usually.

We narrow the paragraph so that it will always be the smallest part and looks centered. Similar for blockquote. It is already moved from the sides of our journal by default, but additionally we give it more spacing at the top and use only a little padding between the actual content and the border here.

Bild8 by ginkgografix

The CSS code:
h1{
margin: 30px 0 20px 0;
padding: 0 0 10px 0;
border-bottom: 2px solid;}

p{
margin: 20px 80px;}

blockquote{
margin-top: 20px;
padding: 5px;
border: 3px solid #16598f;}



As you can see the spacing between elements can make a big difference already and the results can be easily modified. Just change a value here and there and you often get a totally different layout. Mix that with fancy colors and nice backgrounds and there you go with your new sexy journal design.




Inspiration


Here are some examples of different journal skins. Decide on your own if margin/padding was used right or if it could have been done better.

  notes minimal journal by LeMex White Minimal Journal Skin by madazulu Journal CSS2 - Blue by r4v1 Simplicity Journal Skin CSS by SimplySilent
Simple Journal Skin by NishithV 3D Glasses Journal Skin by fantasy-alive








Have any questions or don't understand something?
Please leave a comment directly to this blog so that people with similar problems can look them up later as well.

If there are certain things you want me adress the next time, either leave a comment here as well or note me directly.

Explaining a few basic things about how to modify the header section of a journal.


:bulletwhite: More of this series
How to: Scrollboxes
How to: Request CSS help
How to: Modifying the Header
How to: Margin + Padding






Have any questions or don't understand something?
Please leave a comment directly to this blog so that people with similar problems can look them up later as well.
Add a Comment:
 
:iconkjherstin:
Kjherstin Featured By Owner Jun 8, 2013
Great that you made this tutorial! Next they can go onto learning about the joys of position absolute and relative. Total madness! Oh and the float property too!
Reply
:iconginkgografix:
ginkgografix Featured By Owner Jun 8, 2013
Such tutorials would be quite handy for a lot of people, but i am not sure if i will be able to explain those things in english in a way that it helps and makes sense :lol:
Reply
:iconkovowolf:
KovoWolf Featured By Owner May 29, 2013  Professional General Artist
Great tutorial! :heart:
Reply
:iconginkgografix:
ginkgografix Featured By Owner May 29, 2013
Thank you! :huggle:
Reply
:icontifa22:
Tifa22 Featured By Owner May 27, 2013  Hobbyist Digital Artist
Danke für das super Tutorial! :happybounce:
Und dein Blindtext ist echt klasse :lol: Habe ihn ganz gelesen :happycry:
Reply
:iconginkgografix:
ginkgografix Featured By Owner May 27, 2013
Ich mag den :B
Hab den vor ner Weile gefunden und finde das interessanter als Standard Lorem Ipsum!
Reply
:icontifa22:
Tifa22 Featured By Owner May 27, 2013  Hobbyist Digital Artist
Das ist er auf jeden Fall!
Reply
:iconpurpleink777:
PurpleInk777 Featured By Owner May 23, 2013  Hobbyist Writer
:hmm: This would be a worthy exercise to try with future (lit) deviations! :iconi-supportplz:

Thanks for sharing! :hug:
Reply
:iconginkgografix:
ginkgografix Featured By Owner May 24, 2013
:#1:

My pleasure!
Reply
:iconcelairen:
Celairen Featured By Owner May 22, 2013  Hobbyist Digital Artist
Danke schön für das und armer armer blinder Text :(
Reply
Add a Comment: