Translate discerption to Arabic (#37650)

* Translate discerption to Arabic

* Translate description and instructions to Arabic

curriculum/challenges/arabic/01-responsive-web-design/basic-css/add-different-margins-to-each-side-of-an-element.arabic.md

@@ -7,10 +7,10 @@ localeTitle: ''
 ---
 
 ## Description
-undefined
+احياناً تحتاج إلى إجراء تعديل على عنصر ما بحيث أن يكون كل واحد من جوانبه له <code>margin</code> بِسُمكٍ مختلف عن الآخر. تتيح لك الـ CSS بالتحكم بِسُمك الـ margin الخاص بكل جانب بِشكل مستقل عن الآخر بإستخدام الخواص <code>margin-top</code>، <code>margin-right</code>، <code>margin-bottom</code> و <code>margin-left</code>.
 
 ## Instructions
-undefined
+اجعل للصندوق الأزرق <code>margin</code> بقيمة 40px من الجانب الاعلى والأيسر، ومن الجانب الاسفل والايمن 20px فقط.
 
 ## Tests
 <section id='tests'>
@@ -87,6 +87,50 @@ tests:
 <section id='solution'>
 
 ```js
-// solution required
+<style>
+  .injected-text {
+    margin-bottom: -25px;
+    text-align: center;
+  }
+
+  .box {
+    border-style: solid;
+    border-color: black;
+    border-width: 5px;
+    text-align: center;
+  }
+
+  .yellow-box {
+    background-color: yellow;
+    padding: 10px;
+  }
+
+  .red-box {
+    background-color: crimson;
+    color: #fff;
+    margin-top: 40px;
+    margin-right: 20px;
+    margin-bottom: 20px;
+    margin-left: 40px;
+  }
+
+  .blue-box {
+    background-color: blue;
+    color: #fff;
+    margin-top: 40px;
+    margin-right: 20px;
+    margin-bottom: 20px;
+    margin-left: 40px;
+  }
+</style>
+<h5 class="injected-text">margin</h5>
+
+<div class="box yellow-box">
+  <h5 class="box red-box">padding</h5>
+  <h5 class="box blue-box">padding</h5>
+</div>
 ```
+
 </section>
+
+