0

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">
....
</div>
</section>
<section id="solitaguida" class="inner">
<div class="content">
...
</div>
</section>

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.

closed as off-topic by DA01, Vincent, Alan Gilbertson, benteh, Lauren Ipsum Jul 26 '14 at 0:44

  • This question does not appear to be about graphic design within the scope defined in the help center.
If this question can be reworded to fit the rules in the help center, please edit the question.

  • 3
    Wouldn't that question belong in StackOverflow? – Emilie 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 – Emilie 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
1

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">
<div></div>
</section>

which translates to....

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

What I think you want is...

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

Only <section> with a class of inner.

and

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.

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