What happened to my margins????

As a book-designer, I'm acutely aware of the importance of whitespace, even when it's not a sheet of paper that defines the page. I don't want text that runs from edge to edge of my eReader or top to bottom. I'm always thinking that I'm missing something that's just under the edge of the screen.

So imagine my horror when all my margins disappeared in my eBooks!

Here's what I discovered. I use xhtml and css to create ePub books. Over the course of the past few months I've been digging deeper into some of the insidious things that happen with this combination. I discovered both the lure and the danger, for example, of the universal selector: "*" in css. This can be very powerful if, for example, you want to use a particular font-family throughout your publication. But it is lethal if you set your font-size in the * attributes. Why? Every single element in the book is affected by the * selector. So, if you choose to set the font-size at *, and then fail to specifically override that attribute on say an "h1" element, the h1 will have the font-size you set at *.

I decided that there was nothing in the * selector that I was setting that couldn't be more effectively set in the "body" element. So I went through all my style sheets and deleted the * specifications.

That's when the margins disappeared.

Don't ask me why. This is one of the mysteries of how eReader software gets programmed that is beyond the realm of normal human intelligence. I will say, however, that once I returned the * selector to my style sheet, my margins all came back even though THERE WERE NO ATTRIBUTES SET in the definition.

So, until I find new and better ways of handling this mystery, my style sheets look approximately like this:

* { }
@page {margin:24pt 0;}
body {margin: 0 auto; padding:0 5%;}

It works. The margins are back. But I still think it is a hack!