nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Remove gap between images

zax

Hello,

Hopefully an easy solution is possible... I have two images next to each other and I want them to be touching. If I make the margin and padding equal to zero, Eclipse/BIRT still inserts a small gap between the images. Is it possible to remove it?

Find more posts tagged with

Comments

kclark

Did you change the padding and margin to 0 for the entire grid or have you done it for each cell?

zax

In my example, there is no grid. Just two images displayed inline next to each other. The padding and margins that I set to zero are image properties. Itdoes seem strange that two images cannot touch each other.

Hans_vd

Hi,

If you put the images in a grid, you can do it. These are the steps I took:
- set the grid padding properties all to 0
- set the grid cell padding properties of every cell to 0 (click in the upper left corner of the grid to select all cells)
- set the image padding properties all to 0

See the attached file: no gaps between the images

Jenkinsj5

<blockquote class='ipsBlockquote' data-author="'Hans_vd'" data-cid="113178" data-time="1357914869" data-date="11 January 2013 - 07:34 AM">
 
See the attached file:</blockquote>
 
Interesting subject for the example.

zax

Hi,

Thanks for the grid suggestion. But what I am trying to do is to have a series of bars that can vary dynamically in width, all touching each other. A kind of chart really, but the BIRT charting functionality is not easy to use for what I am trying to do. This is what I have so far:

Clement Wong

Stephen, 
 
The cause of the gap is because there is a newline between the tags that contain each <IMG>. Browsers will interpret the newline as a space and thus you are seeing gaps. 
 
There are two potential solutions depending on your application: 
 
<ul class='bbcol decimal'><li>Instead of images, you can use a DIV tag for each color. The width of the DIV will be a percentage of your value. This may not export to PDF in the same line. 
</li><li>Use images, but add Javascript to visit each of the SPANs to add the CSS style float:left. Adding this CSS style to the SPAN tags will remove the gaps. I have added a bookmark on the surrounding table so that finding the specific SPANs instead of all SPANs will be easier.</li></ul>
 
I have included a sample design which illustrates both of these methods.