---
id: bad88fee1348bd9aedf08825
title: Adjust the Padding of an Element
challengeType: 0
guideUrl: 'https://chinese.freecodecamp.org/guide/certificates/adjust-the-padding-of-an-element'
videoUrl: ''
localeTitle: 调整元素的填充
---
## Description
现在让我们将我们的Cat Photo App放一段时间,了解更多关于样式HTML的信息。您可能已经注意到了这一点,但所有HTML元素基本上都是小矩形。三个重要属性控制每个HTML元素周围的空间: padding
, margin
和border
。元素的padding
控制元素内容与其border
之间的空间量。在这里,我们可以看到蓝色框和红色框嵌套在黄色框中。请注意,红色框具有比蓝色框更多的padding
。当您增加蓝框的padding
,它将增加文本与其周围边框之间的距离( padding
)。
## Instructions
更改蓝色框的padding
以匹配红色框的padding
。
## Tests
```yml
tests:
- text: 你的blue-box
类应该给出20px
的padding
元素。
testString: 'assert($(".blue-box").css("padding-top") === "20px", "Your blue-box
class should give elements 20px
of padding
.");'
```
## Challenge Seed
```html
margin
padding
padding
```
## Solution
```js
// solution required
```