I've designing a page for a site of mine, but I'm getting a strange issue with the following code.

<section id="struttura" class="inner">
<div class="content">
<section id="solitaguida" class="inner">
<div class="content">

section .inner { margin-top: 1.5em; }
div .inner { padding-top: 1.5em; }

AS you can see I use the .inner class in the section item, but for some reason also the div .inner is read adding double the space.

I can't understand the reason.

Is the "section" item treated as a div.

  • 3
    Wouldn't that question belong in StackOverflow? – curious Jul 25 '14 at 19:10
  • @MrE.Upvoter so does this mean I can't have 1.5 at all? – Andrea Moro Jul 25 '14 at 19:24
  • 1
    The support is not that bad for rem units actually. No IE8 and no Opera but the rest works. caniuse.com/rem – curious Jul 25 '14 at 19:46
  • I'm not entirely clear on what the question is, but yes, this should be on StackOverflow. Ideally, you'd also post your code with a link to JSFiddle for us to take a look at in-browser. – DA01 Jul 25 '14 at 20:48
  • 2
    This question appears to be off-topic because it belongs on Stack Overflow. – Vincent Jul 25 '14 at 22:14

Your'e CSS is not specific enough from the sound of things. You need to remove the spaces in the selectors.

section .inner { margin-top: 1.5em; }

All <section> tags followed by a class of inner. Add the margin to anything within a <section> which has the "inner" class.

div .inner { padding-top: 1.5em; }

All <div> tags followed by a class of inner. Add the padding to anything within a <div> which has the "inner" class.

So with that in mind... anything with an "inner" class inside both a <section> and <div> tag will have both the margin and padding applied to it.

Using your current CSS, you're basically writing....

<section class="inner">

which translates to....

<section style="margin-top: 1.5em;">
<div style="margin-top: 1.5em, padding-top:1.5em;"></div>

What I think you want is...

section.inner { margin-top: 1.5em; }

Only <section> with a class of inner.


div.inner { padding-top: 1.5em; }

Only <div> with a class of inner.

The spaces in the selectors are causing them to be far more global than it appears you want.

| improve this answer | |

Not the answer you're looking for? Browse other questions tagged or ask your own question.