DRAG DROP
You develop an HTML5 webpage. You have the following HTML markup:
You need to update the content of the DIV element when the mouse hovers over an image
and when the mouse coordinates change.
How should you complete the relevant code? (To answer, drag the appropriate code
segment to the correct location or locations in the answer area. Use only code segments that
apply.)
Answer: 
Heres my explanation for anyone confused, as I was when I first saw this question:
Box1’s answer is the first option because it is the only option that sets a border. (border: 1px solid #f00) The other options all contain styling elements but none of them actually CREATE the border like in option 1.
Box 2’s answer is the first option because we are creating a linear-gradient that goes from green to black from the top to the bottom. Therefore to-bottom is the correct directional choice. Also note that Linear-Gradients go up/down/left/right/diagonally whereas Radial-Gradients are defined by their center. (http://www.w3schools.com/css/css3_gradients.asp)
Box 3’s answer is the second option because Margin is the outer space of an element, whereas Padding is the inner space of an element. Since we are trying to space the outer space of the element we choose margin rather than padding. (http://stackoverflow.com/questions/2189452/when-to-use-margin-vs-padding-in-css)