Sometimes you will want to customize an element so that it has different amounts of <code>padding</code> on each of its sides.
CSS allows you to control the <code>padding</code> of all four individual sides of an element with the <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, and <code>padding-left</code> properties.
</section>
## Instructions
<sectionid='instructions'>
Give the blue box a <code>padding</code> of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side.
testString: assert($(".blue-box").css("padding-top") === "40px", 'Your <code>blue-box</code> class should give the top of the elements <code>40px</code> of <code>padding</code>.');
testString: assert($(".blue-box").css("padding-right") === "20px", 'Your <code>blue-box</code> class should give the right of the elements <code>20px</code> of <code>padding</code>.');
testString: assert($(".blue-box").css("padding-bottom") === "20px", 'Your <code>blue-box</code> class should give the bottom of the elements <code>20px</code> of <code>padding</code>.');
testString: assert($(".blue-box").css("padding-left") === "40px", 'Your <code>blue-box</code> class should give the left of the elements <code>40px</code> of <code>padding</code>.');