2

As an overall solution to bottom margin of modules, I tried to just remove the bottom padding of my container module so that the bottom spacing will just be determined by the bottom margin of the elements inside it like so:

.module {
   padding: 20px 20px 1px;
}

.element-1,
p, ul, form { margin-bottom: 25px; }

It works if all my last elements (even nested ones) are block elements (their bottom margins collapse). However, if it so happens that within the nested elements, there is an inline-block element, the bottom margin doesn't collapse so it sort of adds up to the total bottom margin.

See jsFiddle: http://jsfiddle.net/GHQrX/

What is the solution to collapse margin of inline-block elements?

aynber
  • 22,380
  • 8
  • 50
  • 63
catandmouse
  • 11,309
  • 23
  • 92
  • 150
  • If you give any element display:inline-block it will add white space or line-break which create the gap. To overcome this issue you need to add negative margin to it. Refer this http://stackoverflow.com/questions/1833734/display-inline-block-extra-margin – Vikas Ghodke Oct 12 '13 at 11:17
  • Isn't it because inline elements don't have margins? – Jakub Kotrs Oct 12 '13 at 11:32
  • If you remove margin-bottom: 20px from your class(.cont-3 ), it should work. – Nikhil N Oct 12 '13 at 11:49
  • Why do you need an inline block element? – BoltClock Oct 12 '13 at 12:29
  • @BoltClock I am using it for buttons. They look like inline elements but they need bottom margins (hence inline-block). – catandmouse Oct 12 '13 at 12:36
  • 3
    @BoltClock inline-blocks also great to make responsive grids, but the incollapsible margin make it hard to layout properly – am05mhz Jan 13 '14 at 15:52

0 Answers0