---
id: 60a3e3396c7b40068ad6996d
title: الخطوة 4
challengeType: 0
dashedName: step-4
---

# --description--

المحتوى محاط بمسافة تسمى padding، على غرار الطريقة التي يفصل بها الـ bubble wrap شئً ما عن الصندوق المحيط به.

فكر في الحدود (border) مثل صندوق الورق المقوى الذي تم شحن الشئ الخاص بك فيه.

قم بتغيير سمة `src` إلى `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png`

# --hints--

يجب أن يحتوي عنصر `img` الجديد على `src` بقيمة `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png`

```js
assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png');
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Rothko Painting</title>
  </head>
  <body>
--fcc-editable-region--
    <img src="https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png">
--fcc-editable-region--
  </body>
</html>
```
