3.4 KiB
3.4 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
bad87fee1248bd9aedf08824 | Add Different Margins to Each Side of an Element | 0 |
Description
احياناً تحتاج إلى إجراء تعديل على عنصر ما بحيث أن يكون كل واحد من جوانبه له margin
بِسُمكٍ مختلف عن الآخر. تتيح لك الـ CSS بالتحكم بِسُمك الـ margin الخاص بكل جانب بِشكل مستقل عن الآخر بإستخدام الخواص margin-top
، margin-right
، margin-bottom
و margin-left
.
Instructions
اجعل للصندوق الأزرق margin
بقيمة 40px من الجانب الاعلى والأيسر، ومن الجانب الاسفل والايمن 20px فقط.
Tests
tests:
- text: لديك <code>blue-box</code> الطبقة يجب أن تعطي الجزء العلوي من عناصر <code>40px</code> من <code>margin</code> .
testString: 'assert($(".blue-box").css("margin-top") === "40px", "Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.");'
- text: ''
testString: 'assert($(".blue-box").css("margin-right") === "20px", "Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.");'
- text: ''
testString: 'assert($(".blue-box").css("margin-bottom") === "20px", "Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.");'
- text: يجب أن تعطيك فئة <code>blue-box</code> يمين العناصر <code>40px</code> من <code>margin</code> .
testString: 'assert($(".blue-box").css("margin-left") === "40px", "Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.");'
Challenge Seed
<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;
}
</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>
Solution
<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>