My html/css document has ghost margins or padding? -
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.
- 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.
- by setting images 
max-width:25%, you're drawing them @ 1/4 width, still reserve 100% of width (sort of howposition:relativeaffects 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.
- 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:blockimgstyles. 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; }        
Comments
Post a Comment