3

Can anyone point me to specs?

x-x {
  padding: 10px;
}
<x-x>
  <div>1</div>
  <div>2</div>
</x-x>
  • padding-left does not pad
  • however, padding-top and padding-bottom does
  • why is this?

http://codepen.io/geoyws/pen/NNJjPV

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
geoyws
  • 3,326
  • 3
  • 35
  • 47
  • Its because you have div which are block level elements...as a trick you can see that if you add div { display: inline-block; } before your styling for x-x, you will see padding left work – Megha May 11 '16 at 03:38
  • 1
    `` is not a valid HTML tag. Why are you using this? – davidatthepark May 11 '16 at 03:40
  • you can do this in your case div { padding-left:10px; } and this will work – Megha May 11 '16 at 03:41
  • @davidatthepark http://stackoverflow.com/questions/9845011/are-custom-elements-valid-html5 They are custom tags :) – geoyws May 11 '16 at 03:45

2 Answers2

4

Your custom element (<x-x>) defaults to CSS initial values. So its display value is inline.

This element contains two divs, which are block-level elements.

Because an inline box cannot wrap a block-level box, the browser implicitly closes the <x-x> before it wraps the div.

Hence, the reason the left padding is not working is because the custom element is not actually wrapping the two divs. It's closed right before the first opening <div> (in effect, making the custom element and the divs more like siblings).

However, if you put a span in the custom element, the padding will work, because a span is display: inline by default, and it can be wrapped by another inline-level element (demo).

All this can be verified in dev tools. Highlight the custom element to see that it doesn't wrap the divs.

As described in the spec, inline-level boxes "break around" block-level boxes:

9.2.1.1. Anonymous block boxes

When an inline box contains an in-flow block-level box, the inline box (and its inline ancestors within the same line box) are broken around the block-level box (and any block-level siblings that are consecutive or separated only by collapsible whitespace and/or out-of-flow elements), splitting the inline box into two boxes (even if either side is empty), one on each side of the block-level box(es). The line boxes before the break and after the break are enclosed in anonymous block boxes, and the block-level box becomes a sibling of those anonymous boxes. When such an inline box is affected by relative positioning, any resulting translation also affects the block-level box contained in the inline box.

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • Thanks man. Appreciate the time spent – geoyws May 11 '16 at 03:57
  • Strictly speaking the inline boxes generated by the x-x are not even siblings of the divs. They are children of anonymous block boxes - it's the anonymous block boxes that are siblings of divs, since an inline-level box and a block-level box cannot coexist in the same formatting context. But yes, in effect the inline boxes *are* no longer parents of the divs. – BoltClock May 11 '16 at 05:10
  • @BoltClock, I'll update my answer when I'm back at my PC. Thanks, as always, for the quality feedback. – Michael Benjamin May 11 '16 at 05:26
  • @BoltClock, I think the answer makes more sense now. It's also more concise. Thanks. again..I'll delete my comments shortly. – Michael Benjamin May 12 '16 at 03:44
1

You have set padding to x-x by 10px which having display: inline; by default where as the display property of its child is display: block; So by just adding display block to parent i.e. to x-x element along with padding: 10px; you will get your expected result.

x-x {
  padding: 10px;
  display:block;
}

Happy coding :-)

Akash Jain
  • 368
  • 1
  • 15