My html/css document has ghost margins or padding? -

http://jsfiddle.net/2psu0gs4/

have @ js fiddle above. there ghost margins can't rid of , don't understand why they're there??

i have tried margin: 0; isnt working?

<help></help> 

any help?

tom

you have few issues causing trouble.

1. your anchors inline elements , therefore respect whitespace (line breaks , spaces) between tags. comment between every tag (see https://css-tricks.com/fighting-the-space-between-inline-block-elements/), that's lot of markup , more of hack solution.

i recommend setting anchors display inline-block they'll handle margins , padding in way expect them to, , float them left stack neatly against each other.

2. by setting images max-width:25%, you're drawing them @ 1/4 width, still reserve 100% of width (sort of how position:relative affects blocks) causes anchor tags draw @ 500px wide.

to solve this, moved max-width:25% style img declaration a declaration. left me 500px wide images overlapping each other, solved adding max-width:100% style img declaration.

3. i couldn't tell why is, i've learned trying butt images against other blocks default, images reserve ~3-5px beneath them part of height property. around this, can add display:block img styles. causes image reserve exact width , height image drawn at, , because it's wrapped in inline-block element, still stack nicely.

.

.content {     display:inline-block;     margin:0;     max-width:25%;     float:left; } .content img {     display:block;     max-width:100%;     margin: 0;     padding: 0; } 

https://jsfiddle.net/2psu0gs4/5/