4

JSFIddle: http://jsfiddle.net/s3fnhmtz/3/

It's quite common to have margin-bottom: 20px on elements like <p> or .button as we tend to use these in page flow and these need breathing room.

But something i get stuck on quite often is removing this margin if it is the last element inside something like a <div class="panel"></div> that has some padding to it we get 20px + margin at the bottom so we end up with a bigger space at the bottom than the top.

1 fix i normally use is: .panel *:last-child *:last-child { as bad as this is it works for the most part. But in the Fiddle you can see if you was using something like a <dt> it falls apart a bit.

I can't realistically go through and list every element that could possible be last so is there a better foolproof way to fix this issue?

Dan Gamble
  • 3,965
  • 1
  • 24
  • 44
  • Why not `margin-top: 20px;` and `.panel p:first-child{ margin-top: 0; }`? – lmgonzalves Jul 16 '15 at 15:01
  • 2
    It's still the same principle just reversed. That means i'd have to change all my `margin-bottoms` to `margin-top` and then just try and find a way to reset the top on all elements that could come first – Dan Gamble Jul 16 '15 at 15:02
  • I posted a bogus answer ... hadn’t read your question through ... sorry :) Anyway, you could perhaps turn the problem on it’s head, and remove the bottom-padding in the parent? ... or look into forcing box-model-rendering, which I use all the time, with reliable results (not sure if that fixes your problem, but it might be worth some research). – Ole Sauffaus Jul 16 '15 at 15:14
  • I could remove the bottom padding but then sometimes elements have no `margin-bottom` so they would sit flush with the bottom. You could say i could add margin-bottom to the last item in the panel but i'm a bit back to square one with a struggle on how to target the last items i need – Dan Gamble Jul 16 '15 at 15:17
  • Find a nice reset.css (or take the trouble, and make your own) + force box-model-rendering. (-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;) – Ole Sauffaus Jul 16 '15 at 15:25
  • A reset.css wouldn't take away `margin` i've added myself to `

    ` tags or `

     – Dan Gamble Jul 16 '15 at 15:28
  • No, but a good reset will normalise all elements margin ... removing your odd-out problem with
    for instance. PS:
    looks fine here, on Mac/Safari ... that is what a reset.css is used for ... consistency.
     – Ole Sauffaus Jul 16 '15 at 15:30
  • I've updated the OP with a new JSFiddle showing the problem when using 3 floated buttons as well as it's not a `
    ` specific problem
     – Dan Gamble Jul 16 '15 at 15:37

1 Answers1

4

While still valid, a lot of the answers are missing the point of your question, which is a more concise method to recursively drill down through the last children.

See this answer here: Select recursive :last-child. Possible?

So your only recourse may be to drill down with the wildcard selector.

.panel.two > *:last-child,
.panel.two > *:last-child > *:last-child,
.panel.two > *:last-child > *:last-child > *:last-child {
    margin-bottom: 0;
}

You may be able to create a recursive-check mixin using SASS, but I don't believe the elegant single attribute recursive application exists. :(

Community
  • 1
  • 1
Plummer
  • 6,522
  • 13
  • 47
  • 75
  • Yea this is another option i've explored which is soo dirty but the only thing i can think of tbh. If nothing else pops up then i'll just mark this as the answer as it's the only thing i can think of that works. Although i still do have the problem where it would target the last button. I almost need a `:last-of-type` somewhere but that would just cause more breakage than fixage – Dan Gamble Jul 16 '15 at 16:10
  • Keep hunting. I'll be grateful to see if someone come up with something better. :) – Plummer Jul 16 '15 at 16:26