CSS: margin-top and margin

[Leonatus]

At formatting the <p> in the css of an epub in Sigil, I wished to create a certain distance between single paragraphs. Thus, I added
margin-top: 2em;

O.k. it worked. Only that I found that 2em is a little too much. So I changed the margin-top to 1em, and, surprise: nothing changed, though trying several times. The space between the paragraphs could not be manipulated anymore.

Then, I looked in other epubs; in one of them, I found, instead of margin-top, simply:
margin: 1 0;

I adapted this to my ebook, and, hoops, the margin changed. Could somebody, please, explain to me what has happened, and what has been my mistake?

[mrmikel]

You apparently set it to px, by leaving off a unit. It looks like you changed the left and right margin as well.

Look here:
http://www.w3schools.com/css/css_margin.asp

[JSWolf]

Originally Posted by Leonatus

At formatting the <p> in the css of an epub in Sigil, I wished to create a certain distance between single paragraphs. Thus, I added
margin-top: 2em;

O.k. it worked. Only that I found that 2em is a little too much. So I changed the margin-top to 1em, and, surprise: nothing changed, though trying several times. The space between the paragraphs could not be manipulated anymore.

Then, I looked in other epubs; in one of them, I found, instead of margin-top, simply:
margin: 1 0;

I adapted this to my ebook, and, hoops, the margin changed. Could somebody, please, explain to me what has happened, and what has been my mistake?

What I've seen used in some ePub is the following CSS code...

p {
margin-top: .3em;
margin-bottom: .3em
}

1em is still too large. Anything above .3em is too large (IMHO).

But personally, I'd change the .3em to 0 so there's no paragraph spaces. I'm not a fan of them.

[odedta]

Doesn't seem to be the error in what he did actually.

The margin property can be used in a number of ways:
1. set 1 value which will mean you set a specific value for all sides.

margin:0;

2. set 4 values. values go: top right bottom left (clockwise)

margin: 0 0 0 0;

3. set 2 values. values go: top and the rest.

margin: 0 0;

It's the lazy way of having to type margin-top, margin-right, margin-left and margin-bottom and i'm glad they made that.

In any case, you have to apply both margin-top and margin-bottom to get the margins between paragraphs you want or you can just use line-height but I found that worked less efficiently on some books so stick to margins.

[JSWolf]

I'm not. I find the lazy margin harder to read. It's easier to have all four margins separate because it is easier to read at a quick glance.

[Jellby]

Originally Posted by odedta

3. set 2 values. values go: top and the rest.

Nope. It's top-and-bottom and left-and-right.

[JSWolf]

From http://www.w3schools.com/css/css_margin.asp

margin: 25px 50px 75px 100px;

    top margin is 25px
    right margin is 50px
    bottom margin is 75px
    left margin is 100px

[odedta]

Originally Posted by Jellby

Nope. It's top-and-bottom and left-and-right.

Yep, if you follow the clockwise sense then you get:

The margin property can have from one to four values.

margin: 25px 50px 75px 100px;
top margin is 25px
right margin is 50px
bottom margin is 75px
left margin is 100px

margin: 25px 50px 75px;
top margin is 25px
right and left margins are 50px
bottom margin is 75px

margin: 25px 50px;
top and bottom margins are 25px
right and left margins are 50px

margin: 25px;
all four margins are 25px

[JSWolf]

This is just so much easier to read...

.margins {
margin-top: 20px;
margin-bottom: 50px;
margin-left: 75px;
margin-right: 100px
}

[odedta]

Originally Posted by JSWolf

This is just so much easier to read...

.margins {
margin-top: 20px;
margin-bottom: 50px;
margin-left: 75px;
margin-right: 100px
}

lol, there is no point in arguing about it, do what ever you like

[JSWolf]

Originally Posted by odedta

lol, there is no point in arguing about it, do what ever you like

I'm not arguing. Besides, it's not an argument when I'm right.

As you can see, Jellby got it incorrect. But with the long form margins, there's no way to get it incorrect.

[Jellby]

Originally Posted by JSWolf

As you can see, Jellby got it incorrect. But with the long form margins, there's no way to get it incorrect.

I don't think I got it incorrect, I meant that with two values the first is for the vertical margins and the second for the horizontal ones.

On the other hand, it's much simpler to write "{margin:1em}" than detailing all four margins. I use different forms depending on what I want.

[JSWolf]

I'll still be writing margins separately. It's just easier to me. I don't have to remember all the different permutations. Besides, in most cases, I don't need more then two margins.

[Tex2002ans]

Originally Posted by JSWolf

I'll still be writing margins separately. It's just easier to me. I don't have to remember all the different permutations.

I agree, my personal preference is leaning towards long form being much easier to read.

Also, there is that ol' Nook Touch (?) bug that some users ran across because they were using the short-hand form of margin.

[JSWolf]

I've not seen any nook bug with the short form for margins. But, I've not read that much on my nook STR.