1

As I understand, a button element's display is inline-block which means it forms a BFC(block formatting context) and what I know abt BFC is that margins do not collapse between block elements outside of a BFC and that inside of BFC.

However, if a BFC's display type is set to 'block, then margins should collapses as essentially we have turnedinline-blockinto a regularblock` but that does not appear to happen in the following code.

Here is the Fiddle

HTML

<div class="no-collapse">
  <h2> MARGIN <u>DO NOT</u> COLLAPSE</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam perspiciatis libero hic perferendis pariatur minus, officia fugiat id doloremque cum. Esse id, molestiae. Nihil similique libero deserunt, facilis fuga totam.</p>
  <button>
    <h2>BUTTON TURNED INTO BLOCK</h2> This is a button turned into regular block
    </button>
</div>

<div class="collapse">
  <h2> MARGIN COLLAPSES</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam perspiciatis libero hic perferendis pariatur minus, officia fugiat id doloremque cum. Esse id, molestiae. Nihil similique libero deserunt, facilis fuga totam.</p>
  <p>Reguarl paragraph block</p>
</div>

CSS

div.no-collapse {
  background-color: antiquewhite; 
  border: 1px dotted black}

div.collapse { background-color: aqua;}
button {
  display: block;
  border: 0;
  padding-top: 0;
  padding: 0;
}

p { background-color: #ccc; }

Can anybody explain the reason why margins do not collapse for a BFC turned into block element ?

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
dkjain
  • 831
  • 1
  • 9
  • 36
  • You can't put block level elements in a `button`....its invalid HTML. That's why. – Paulie_D Jul 16 '16 at 09:29
  • http://stackoverflow.com/questions/746531/is-it-wrong-to-change-a-block-element-to-inline-with-css-if-it-contains-another – Paulie_D Jul 16 '16 at 09:35
  • the `display` has been set to `block` so technically it's no more different than another block level element differing only by visual properties such as `background-color` and some others. Dimensional properties such as `width`, `height` `margin`, `padding` etc would be calculated as per block level elements algorithm. – dkjain Jul 16 '16 at 09:37
  • Nope..check the link....it's more complicated than that. Regardless, it's invalid HTML – Paulie_D Jul 16 '16 at 09:46

1 Answers1

0

CSS 2.2 section 3.2 says:

CSS 2.2 does not define which properties apply to form controls and frames, or how CSS can be used to style them. User agents may apply CSS properties to these elements

This applies to buttons, and essentially means that all bets are off. So applying display:block to a button element, although it has some effects, does not simply make the button render as a block box in the way that, say, setting display:block on a span element does. In particular, it certainly does not change the way its content is rendered, and does does not stop the button from being a BFC to its content.

Alohci
  • 78,296
  • 16
  • 112
  • 156
  • Possible correct way to interpret the behavior but still looking for a more concrete interpretation. – dkjain Jul 17 '16 at 07:34