## Task
Let's explore the practical differences between the `content-box` and `border-box` values for the `box-sizing` property. Your task is as follows:
- Apply the `content-box` value to the `box-sizing` property for the element with the `content-box` id.
- Apply the `border-box` value to the `box-sizing` property for the element with the `border-box` id.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGRpdiBpZD0iY29udGVudC1ib3giPgogICAgICA8aDE+Q29udGVudCBCb3g8L2gxPgogICAgICA8cD4KICAgICAgICBUaGlzIGJveCB1c2VzIHRoZSBkZWZhdWx0IHZhbHVlIG9mICdjb250ZW50LWJveCcgZm9yIHRoZSAnYm94LXNpemluZycKICAgICAgICBwcm9wZXJ0eS4gVGhlIHdpZHRoIGFuZCBoZWlnaHQgb2YgdGhlIGJveCBhcmUgc2V0IHRvIDIwMCBwaXhlbHMsIGFuZCB0aGUKICAgICAgICBwYWRkaW5nIGFuZCBib3JkZXIgYWRkIGV4dHJhIHNwYWNlIHRvIHRoZSBib3gsIG1ha2luZyBpdCBsYXJnZXIgdGhhbiAyMDAKICAgICAgICBwaXhlbHMgaW4gYm90aCBkaW1lbnNpb25zLgogICAgICA8L3A+CiAgICA8L2Rpdj4KICAgIDxkaXYgaWQ9ImJvcmRlci1ib3giPgogICAgICA8aDE+Qm9yZGVyIEJveDwvaDE+CiAgICAgIDxwPgogICAgICAgIFRoaXMgYm94IHVzZXMgdGhlICdib3JkZXItYm94JyB2YWx1ZSBmb3IgdGhlICdib3gtc2l6aW5nJyBwcm9wZXJ0eS4gVGhlCiAgICAgICAgd2lkdGggYW5kIGhlaWdodCBvZiB0aGUgYm94IGFyZSBzdGlsbCBzZXQgdG8gMjAwIHBpeGVscywgYnV0IHRoZSBwYWRkaW5nCiAgICAgICAgYW5kIGJvcmRlciBhcmUgaW5jbHVkZWQgaW4gdGhlIGJveCdzIGRpbWVuc2lvbnMuIFRoaXMgbWVhbnMgdGhhdCB0aGUKICAgICAgICB0b3RhbCBzaXplIG9mIHRoZSBib3ggaXMgZXhhY3RseSAyMDAgcGl4ZWxzIGluIGJvdGggZGltZW5zaW9ucy4KICAgICAgPC9wPgogICAgPC9kaXY+CiAgPC9ib2R5Pgo8L2h0bWw+

I2NvbnRlbnQtYm94IHsKICB3aWR0aDogMjAwcHg7CiAgaGVpZ2h0OiAyMDBweDsKICBtYXJnaW46IDIwcHg7CiAgcGFkZGluZzogMjBweDsKICBib3JkZXI6IDEwcHggc29saWQgcmVkOwogIGJveC1zaXppbmc6IF9fXzsgLyogQ2hhbmdlIHRoaXMgbGluZSAqLwp9CgojYm9yZGVyLWJveCB7CiAgd2lkdGg6IDIwMHB4OwogIGhlaWdodDogMjAwcHg7CiAgbWFyZ2luOiAyMHB4OwogIHBhZGRpbmc6IDIwcHg7CiAgYm9yZGVyOiAxMHB4IHNvbGlkIGJsdWU7CiAgYm94LXNpemluZzogX19fOyAvKiBDaGFuZ2UgdGhpcyBsaW5lICovCn0=

- `box-sizing: content-box`: Width and height exclude padding and border.
- `box-sizing: border-box`: Width and height include padding and border.


I2NvbnRlbnQtYm94IHsKICB3aWR0aDogMjAwcHg7CiAgaGVpZ2h0OiAyMDBweDsKICBtYXJnaW46IDIwcHg7CiAgcGFkZGluZzogMjBweDsKICBib3JkZXI6IDEwcHggc29saWQgcmVkOwogIGJveC1zaXppbmc6IGNvbnRlbnQtYm94OyAvKiBDaGFuZ2UgdGhpcyBsaW5lICovCn0KCiNib3JkZXItYm94IHsKICB3aWR0aDogMjAwcHg7CiAgaGVpZ2h0OiAyMDBweDsKICBtYXJnaW46IDIwcHg7CiAgcGFkZGluZzogMjBweDsKICBib3JkZXI6IDEwcHggc29saWQgYmx1ZTsKICBib3gtc2l6aW5nOiBib3JkZXItYm94OyAvKiBDaGFuZ2UgdGhpcyBsaW5lICovCn0=

## Explanation
- The **first box** uses `content-box` (the default). Width and height apply only to the content, so padding and border **increase** its final size beyond 200×200px;
- The **second box** uses `border-box`. Width and height include content, padding, and border, so the overall size stays **exactly 200×200px**.

This makes the first box visibly larger, while the second remains consistent regardless of added padding or border.

Learn how CSS brings structure and visual style to web pages by controlling layout, typography, spacing, and interactive states. Topics range from core styling concepts and selectors to the box model, Flexbox layouts, fonts, backgrounds, and decorative effects for building modern, responsive interfaces.

Challenge: Apply Box Sizing to Elements

Task

Explanation

Challenge: Apply Box Sizing to Elements

Task

Explanation