CodeCow/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-06-22 21:08:12 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

feat(curriculum): add interactive examples to width and height lesson (#62771)

Browse Source
This commit is contained in:
Ariz Faiyaz 2025-10-14 01:02:30 +05:30 committed by GitHub
parent af70a07547
commit 2d574da6e6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 13 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
curriculum/challenges/english/blocks/lecture-what-is-css/672acc03c257524d6a5151e8.md
View File

@ -5,7 +5,7 @@ challengeType: 19
dashedName: how-do-width-and-height-work
---
# --description--
# --interactive--
In CSS, the `width` and `height` properties are used to control the dimensions of elements on a webpage.
@ -17,6 +17,8 @@ The `height` property specifies the height of an element. Similarly, the height
Here's an example using the `width` and `height` properties:
:::interactive_editor
```html
<head>
<style>
@ -32,6 +34,8 @@ Here's an example using the `width` and `height` properties:
</body>
```
:::
In this example, we have a `div` element with class named `box`. This element will be occupying `100px` in height and width, whereas the background color will be `skyblue`.
Pixels are a fixed-size unit of measurement in CSS, providing precise control over dimensions.
@ -42,6 +46,8 @@ The `min-height` specifies the minimum height an element can be. It ensures that
Here is an example:
:::interactive_editor
```html
<head>
<style>
@ -59,6 +65,8 @@ Here is an example:
</body>
```
:::
The above example demonstrates how `min-width` and `min-height` work.
Even though the box has its `width` and `height` set to 50px, it will actually be `100px` by `100px`. This is because the `min-width` and `min-height` are set to `100px`, which are larger than the specified `width` and `height`.
@ -71,6 +79,8 @@ The `max-height` specifies the maximum height an element can grow to, regardless
Here is an example:
:::interactive_editor
```html
<head>
<style>
@ -88,6 +98,8 @@ Here is an example:
</body>
```
:::
The above example demonstrates how `max-width` and `max-height` override `width` and `height`. Even though the box is set to `200px` by `200px`, it will actually be `150px` by `150px`. This is because the `max-width` and `max-height` are set to `150px`, which is smaller.
Remember, when `max-width` or `max-height` are smaller than `width` or `height`, they take precedence. This is important for controlling the maximum size of elements in your layouts.