margins

 

 

 

1. Margins shift groups away from their natural position, so when I add a margin-left of 50px, the object shifts 50px away from the left. The same works for margin-right, margin-top and margin-bottom as well.
 

<div style="float:left;margin-left:50px;width:200px;height:200px;"><img alt="" src="http://i.imgur.com/8Izc35f.png" style="width:200px;height:200px;" />div>

 

 

 

2. Margins can also be used to separate different objects/groups.
 

<div style="float:left;width:200px;height:200px;"><img alt="" src="http://i.imgur.com/8Izc35f.png" style="width:200px;height:200px;" />div>

<div style="float:left;margin-left:50px;width:200px;height:200px;"><img alt="" src="http://i.imgur.com/8Izc35f.png" style="width:200px;height:200px;" />div>

 

 

 

3. Margins work with negative values as well. For example,
 

<div style="float:left;width:200px;height:200px;"><img alt="" src="http://i.imgur.com/8Izc35f.png" style="width:200px;height:200px;" />div>

<div style="float:left;margin-left:-50px;width:100px;height:100px;"><img alt="" src="http://i.imgur.com/8Izc35f.png" style="width:100px;height:100px;" />div>

 

Notice the second <div> group has a margin-left of -50px. Hence, the seco