5

Browsers usually set different default styles for elements. Users can also override the defaults using custom stylesheets.

I often override these default styles using my own styles, e.g.:

* {padding:0; margin:0; }

However, I wish to respect the default stylesheet for certain element attributes, e.g. the <body>'s default padding and margin. I tried:

*    { padding:0;       margin:0;       }
body { padding:default; margin:default; }

But it doesn't work. Neither does initial.

Is there a way to solve this problem by selecting all elements but excluding <body>?

Rubén
  • 34,714
  • 9
  • 70
  • 166
Pacerier
  • 86,231
  • 106
  • 366
  • 634
  • This is a little silly.. for one thing, it's a good idea to zero out the `margin` on `html, body`. Instead, you should add `margin` onto your container `div`, or whatever. If you really want to do it, then customize a CSS Reset. – thirtydot Jun 13 '11 at 10:01
  • Probably even easier, sticking with what you have: `*{padding:0;margin:0;} body{margin:10px}` - that way, you don't have to use the inefficent `*` (at least, *not again*), and the `body` margin is definitely consistent between browsers. – thirtydot Jun 13 '11 at 10:25
  • @thirtydot but not consistent between user defined stylesheets which was what i meant when i said *default* – Pacerier Jun 13 '11 at 13:00
  • @Pent: Almost *no users* care about the precise `body` margins. Those that *do care* would be using `!important` to make sure their custom `margin`s stick, if it's *that important* to them (they'd have to, because every other website in the world sets `body { margin: 0 }`, or whatever number). See the CSS spec: http://www.w3.org/TR/CSS21/cascade.html#important-rules. Why do you care so much about preserving the *default* margins? – thirtydot Jun 13 '11 at 13:33
  • @thirtydot i'm merely looking for a solution to be able to do so. – Pacerier Jun 13 '11 at 13:37
  • @Pent: And that's fine, and you have your answer. But I think your logic is faulty somewhere, because I can't see how what you asked for is *actually useful*. – thirtydot Jun 13 '11 at 13:41

5 Answers5

10

Is there a way to solve this problem by selecting all elements but excluding <body>?

Since everything that is displayed in the viewport consists of <html>, <body> and <body>'s contents by default, you can just select html, and all of body's descendants:

html, body * { margin: 0; padding: 0; }

default doesn't work because there is no such keyword. initial doesn't work because the initial margins are 0. It is not possible to reset a property to its browser-given default value after you have changed it using CSS.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • 2
    You can [display the `title`](http://jsfiddle.net/twT4F/) with `head, title { display: block; }` :) – alex Jun 13 '11 at 09:42
  • @Pent Read it here a few years back. – alex Jun 13 '11 at 10:08
  • @Boltclock i'd not even tolerate a penalty of 0.1 seconds, but i really don't get why it will be slow, since the css is first read, then the html, at the time when `*` is read, isn't it true that there aren't much elements even if the entire page is supposedly packed with elements? – Pacerier Jun 13 '11 at 10:08
  • @Pent: It's slow because the browser needs to calculate styles for **every element** in the page. – BoltClock Jun 13 '11 at 10:10
  • @Boltclock isn't it such that it is first calculated at the `` ending tag and cached in `computed styles`, and used for each element that it comes across later? – Pacerier Jun 13 '11 at 10:15
  • @Pent: The browser calculates and displays stuff as the page gets downloaded, so it's all in real-time. That's one of the effects of cascading. – BoltClock Jun 13 '11 at 10:19
  • @BoltClock, Hmm, I doubt this is true anymore for modern browsers. There are ways to optimize this easily. – Pacerier Dec 23 '14 at 15:33
  • @Pacerier: Yeah, time flies - I would trust that too. I see you've rewritten your question so it's time I updated my answer as well. – BoltClock Dec 24 '14 at 01:05
2
html, head, head *, body * { }
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
2

<html> and all descendants of <body>:

html, body * {padding:0;margin:0;}
bradley.ayers
  • 37,165
  • 14
  • 93
  • 99
1

Use the body * selector.

body *{padding:0;margin:0;}
alex
  • 479,566
  • 201
  • 878
  • 984
0

Set them first to 0, then override the wanted values afterwards. You'd be better off using a CSS Reset though, but if you reall want to use the asterisk, this method will work.

   * {
     padding:0;
     margin:0;
   }

   body, html {
     padding: 10px;
   }

http://meyerweb.com/eric/tools/css/reset/

red
  • 1,980
  • 1
  • 15
  • 26
  • i mean i knew i could do it this way of course, but its not guaranteed 10px you see. its user defined, so how do i know what's the user-defined padding/margin for body? – Pacerier Jun 13 '11 at 10:12
  • Are you referring to the browser specific stylesheets? Why would you need to keep them the default of the browsers? Set something to make the page look the same for each browser. :) If you really want to investigate the defaults, you could use inspect tools and check computed styles of your body\html tags before you apply any special styling. – red Jun 13 '11 at 10:15
  • yep definitely i listed the "default" in the question – Pacerier Jun 13 '11 at 10:17