2018-09-30 22:01:58 +00:00
---
id: 587d7791367417b2b2512ab5
title: Adjust the Height of an Element Using the height Property
challengeType: 0
videoUrl: 'https://scrimba.com/c/cEDaDTN'
2019-08-05 16:17:33 +00:00
forumTopicId: 301034
2021-01-13 02:31:00 +00:00
dashedName: adjust-the-height-of-an-element-using-the-height-property
2018-09-30 22:01:58 +00:00
---
2020-11-27 18:02:05 +00:00
# --description--
You can specify the height of an element using the `height` property in CSS, similar to the `width` property. Here's an example that changes the height of an image to 20px:
2019-05-14 08:11:58 +00:00
```css
img {
height: 20px;
}
```
2020-11-27 18:02:05 +00:00
# --instructions--
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
Add a `height` property to the `h4` tag and set it to 25px.
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
**Note:** You may need to be at 100% zoom to pass the test on this challenge.
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
# --hints--
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
Your code should change the `h4` `height` property to a value of 25 pixels.
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
```js
assert(
Math.round(document.querySelector('h4').getBoundingClientRect().height) ===
25 & &
/h4{\S*height:25px(;\S*}|})/.test($('style').text().replace(/\s/g, ''))
);
```
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
# --seed--
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
## --seed-contents--
2018-09-30 22:01:58 +00:00
```html
< style >
h4 {
text-align: center;
2018-10-08 00:01:53 +00:00
2018-09-30 22:01:58 +00:00
}
p {
text-align: justify;
}
.links {
margin-right: 20px;
text-align: left;
}
.fullCard {
width: 245px;
border: 1px solid #ccc ;
border-radius: 5px;
margin: 10px 5px;
padding: 4px;
}
.cardContent {
padding: 10px;
}
< / style >
< div class = "fullCard" >
< div class = "cardContent" >
< div class = "cardText" >
< h4 > Google< / h4 >
< p > Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.< / p >
< / div >
< div class = "cardLinks" >
< a href = "https://en.wikipedia.org/wiki/Larry_Page" target = "_blank" class = "links" > Larry Page< / a >
< a href = "https://en.wikipedia.org/wiki/Sergey_Brin" target = "_blank" class = "links" > Sergey Brin< / a >
< / div >
< / div >
< / div >
```
2020-11-27 18:02:05 +00:00
# --solutions--
2018-09-30 22:01:58 +00:00
2019-03-04 18:33:02 +00:00
```html
< style >
h4 {
text-align: center;
height: 25px;
}
p {
text-align: justify;
}
.links {
margin-right: 20px;
text-align: left;
}
.fullCard {
width: 245px;
border: 1px solid #ccc ;
border-radius: 5px;
margin: 10px 5px;
padding: 4px;
}
.cardContent {
padding: 10px;
}
< / style >
< div class = "fullCard" >
< div class = "cardContent" >
< div class = "cardText" >
< h4 > Google< / h4 >
< p > Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.< / p >
< / div >
< div class = "cardLinks" >
< a href = "https://en.wikipedia.org/wiki/Larry_Page" target = "_blank" class = "links" > Larry Page< / a >
< a href = "https://en.wikipedia.org/wiki/Sergey_Brin" target = "_blank" class = "links" > Sergey Brin< / a >
< / div >
< / div >
< / div >
2018-09-30 22:01:58 +00:00
```