On Aug 31, 2011, at 2:38 AM, Philip TAYLOR (Webmaster, Ret'd) wrote:
>> Let's suppose that by looking to those wireframes, I can say that all my h2
>> will have a padding-bottom of 10px.
>> However, if later on, I create a rule telling that the ul will have a margin
>> top of 5px... (because almost all may have that attribute) if I place the h2
>> on top of this ul, instead of the desired 10px, we will end up with 15px...
>> and there, I ask: where/how should I subtract those extra 5 ?
>>
>> This is only an example, this is some sort of conflict that happen A LOT
>> while I'm creating the css.
>
> Understood about this being only an example, but does
> this one case, at least, not get made much simpler
> by the concept of collapsing margins ?
There might be good reasons for using padding vs margins though.
Imagine you have:
h2 { padding: 10px; background: yellow; margin: 0; }
(and you want the text that follows the h2 to be flush with the yellow
background)
In that case, the adjacent sibling combinator comes in handy.
h2 { /*... */ margin:0; }
ul { /*... */ margin: 5px 0 0; }
h2 + ul { margin-top: 0; }
—
And as a general practice. Towards the end of the development, think about
rewriting the stylesheet (ok, not really…). Go through the whole thing and see
how you can optimise it.
And have lots of comments in the development version of the stylesheet.
Philippe
--
Philippe Wittenbergh
http://l-c-n.com/
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
