Home/ Questions/Q 3755590
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T09:43:20+00:00

I have three images in a container that should be stacked seamlessly, but there

  • 0

I have three images in a container that should be stacked seamlessly, but there is some padding occurring between them.

You can see the page here: http://www.arbitersoflight.net/media/

The three large buttons in the container on the left are the ones in question.

Here’s the code for the container:

CSS

#mainBoxFull {
    background-image: url(/img/cont/mainfull.jpg);
    float: left;
    height: 560px; 
    width: 560px; 
    margin: 0px; 
    padding: 20px;
}

HTML

<div id="mainBoxFull">
    <img src="/img/btns/media/bgal.jpg" alt="screenshot" width="560" height="180" border="0" />
    <img src="/img/btns/media/bvid.jpg" alt="videos" width="560" height="200" border="0" />
    <img src="/img/btns/media/bsoon.jpg" alt="coming soon" width="560" height="180" border="0" />
</div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The problem is, that images are inline-blocks. That is, spaces between them are counted. These spaces occur as padding to you. Use

    #mainBoxFull img { display: block; }

    and the problem should vanish. Alternatively, you can remove the white space in the source HTML between the div and the img elements (all white space).

    • 0