Extra space at the bottom of CSS columns

[aka]

I have a container that has images inside. I use CSS columns and media queries to determine my layout. I put a paragraph tag at the bottom and noticed extra space at the bottom of it. Here's what i'm talking about in this fiddle. http://jsfiddle.net/sEe7x/1/. The weirdness is happening at the yellow and orange break points. Does anyone know what is causing this?Here's my code\[code\]-- HTML --<div id="photos"> <img src="http://stackoverflow.com/questions/13851773/path_to_image.ext"> <img src="http://stackoverflow.com/questions/13851773/path_to_image.ext"> <img src="http://stackoverflow.com/questions/13851773/path_to_image.ext"> <img src="http://stackoverflow.com/questions/13851773/path_to_image.ext"> <img src="http://stackoverflow.com/questions/13851773/path_to_image.ext"> ... <img src="http://stackoverflow.com/questions/13851773/path_to_image.ext"> <img src="http://stackoverflow.com/questions/13851773/path_to_image.ext"></div><p>P tag is at the bottom</p>?-- CSS --#photos { line-height: 0; -webkit-column-count: 5; -webkit-column-gap: 5px; -moz-column-count: 5; -moz-column-gap: 5px; column-count: 5; column-gap: 5px; background: red; }@media (max-width: 960px) { #photos { -moz-column-count: 4; -webkit-column-count: 4; column-count: 4; background: yellow; }}@media (max-width: 760px) { #photos { -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; background: orange; }}@media (max-width: 480px) { #photos { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; background: purple; }}?\[/code\]