CODEWITHSUNDEEP
htmlcssweb
木士羽
木士羽

Reputation: 175

Child element's width is changed but the parent element's width doesn't change, why?

reference

In this page, when .gridster > ul's width is changed, but .gridster's width stays. Normally, parent element's width changes as the child element's width changes. Why it stays the same in this case. How to make the parent element's width is equal to the child element's all the time.

Upvotes: 0

Views: 414

Answers (1)

Oriol
Oriol

Reputation: 288020

Because .gridster is a block-level non-replaced element.

10.3 Calculating widths and margins
10.3.3 Block-level, non-replaced elements in normal flow

The following constraints must hold among the used values of the other properties:

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of  containing block

If 'width' is set to 'auto', any other 'auto' values become '0' and 'width' follows from the resulting equality.

In this case,

  • The width is not set, so its value is the initial auto.
  • The horizontal margins are set to auto.
  • The horizontal border-*-style are not set, so their value is the initial none. Thus the horizontal border-*-width compute to 0.
  • The horizontal paddings are not set, so their value is the initial 0.

Then,

  • The horizontal borders and paddings remain 0.
  • The horizontal margins compute to 0 because the width is auto.
  • The width computes to the width of the containing block.

Upvotes: 3

Related Questions