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: [link]
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.
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!
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.
(highlighting .text)
(higlighting .gr-top .gr)
(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
[link] 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:
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.
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.
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.
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.
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.
Sta.sh
All you women are just fucking gorgeous!!! ;w;
s for potential solutions.
) are posted and share them in your journal or your chat. Both are needed to get these to the footer for maximum visibility. Also, participate in contests and prompts when they happen! We know it's not easy to think of something all the time, but if there isn't return on an activity, there's no reason to keep doing it.
)
Must favourite This Journal, that way i can keep up who participated
Thanks for all the feedback though! 
Caring 
Add Media
Style