2018-10-10 22:03:03 +00:00
|
|
|
---
|
|
|
|
id: bad87fee1248bd9aedf08824
|
2020-12-16 07:37:30 +00:00
|
|
|
title: 给元素的每一侧添加不同的外边距
|
2018-10-10 22:03:03 +00:00
|
|
|
challengeType: 0
|
2019-12-13 05:47:57 +00:00
|
|
|
videoUrl: 'https://scrimba.com/c/cg4RWh4'
|
|
|
|
forumTopicId: 16633
|
2018-10-10 22:03:03 +00:00
|
|
|
---
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
# --description--
|
2018-10-10 22:03:03 +00:00
|
|
|
|
2021-01-08 19:20:48 +00:00
|
|
|
有时候,你会想给一个元素每个方向的 `margin` 都设置成一个特定的值。
|
2020-12-16 07:37:30 +00:00
|
|
|
|
2021-01-08 19:20:48 +00:00
|
|
|
CSS 允许你使用 `margin-top`、`margin-right`、`margin-bottom`、`margin-left` 属性来设置四个不同方向的 `margin` 值。
|
2020-12-16 07:37:30 +00:00
|
|
|
|
|
|
|
# --instructions--
|
|
|
|
|
2021-01-08 19:20:48 +00:00
|
|
|
请将蓝色框的顶部和左侧 `margin` 属性值设置为 `40px`;将底部和右侧的属性值设置为 `20px`。
|
2020-12-16 07:37:30 +00:00
|
|
|
|
|
|
|
# --hints--
|
2018-10-10 22:03:03 +00:00
|
|
|
|
2021-01-08 19:20:48 +00:00
|
|
|
class 为 `blue-box` 的元素的上外边距属性值应为 `40px`。
|
2020-12-16 07:37:30 +00:00
|
|
|
|
|
|
|
```js
|
|
|
|
assert($('.blue-box').css('margin-top') === '40px');
|
2018-10-10 22:03:03 +00:00
|
|
|
```
|
|
|
|
|
2021-01-08 19:20:48 +00:00
|
|
|
class 为 `blue-box` 的元素的右外边距属性值应为 `20px`。
|
2018-10-10 22:03:03 +00:00
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
```js
|
|
|
|
assert($('.blue-box').css('margin-right') === '20px');
|
|
|
|
```
|
2018-10-10 22:03:03 +00:00
|
|
|
|
2021-01-08 19:20:48 +00:00
|
|
|
class 为 `blue-box` 的元素的下外边距属性值应为 `20px`。
|
2018-10-10 22:03:03 +00:00
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
```js
|
|
|
|
assert($('.blue-box').css('margin-bottom') === '20px');
|
|
|
|
```
|
2018-10-10 22:03:03 +00:00
|
|
|
|
2021-01-08 19:20:48 +00:00
|
|
|
class 为 `blue-box` 的元素的左外边距属性值应为 `40px`。
|
2018-10-10 22:03:03 +00:00
|
|
|
|
|
|
|
```js
|
2020-12-16 07:37:30 +00:00
|
|
|
assert($('.blue-box').css('margin-left') === '40px');
|
2018-10-10 22:03:03 +00:00
|
|
|
```
|
2019-12-13 05:47:57 +00:00
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
# --solutions--
|
|
|
|
|