Spacing Between Images

[LazyCarrot]

Bit basic guys but I seem to be getting 'filler' in-between my graphics that i can't account for.

I have a <div> width of 960px and 2 images of 750px and 210px respectively.
but they won't sit next to each other unless i reduce one of the graphics by 6 pixels
and this then leaves a 6px 'spacer' between the 2 graphics.

I have been ultra explicit in removing margin, border, and padding in both the CSS and HTML

This is the coding.....

CSS:

#frame-container { width: 960px; padding: 0; margin: 0; border: 0; }

HTML:

<div id="frame-container">
<img src="images/header-test.png" margin="0" padding="0" border="0" width="750px" />
<img src="images/bucket-test.png" margin="0" padding="0" border="0" width="210px" />
</div>


Ok - I've donned my thick skin for when you point out what basic error i've overlooked...

 

[LazyCarrot]

Ok - have just stumbled across my own answer.... duh!!!
it's because the 2 <img> statements have space between them in the coding - which is being interpreted as a physical space.

So the simple answer is to butt the 2 statements next to each other..
Which is effective but looks untidy in the coding... is there a better way of coding this so it's more readable?

 

[LazyCarrot]

... And in answer to myself - in case anyone else is reading this.... yeah, it's just <div>'s and float.... all very basic stuff.
Get a grip man! The white space stuff threw me and nothing seemed to be making sense. Just needed a night's sleep on it.

 

[Parth_Munjpara]

#frame-container{background: white;
margin: auto;
margin-top: 200px;
margin-left: 10px;
padding: 10px;
width: 200px;}

 

[sunfighter]

Welcome to the forums Parth_Munjpara. Good to have you on board. If you look at a post - just under the text is the word REPORT in blue and to the left of that is the date the post was made. You just answered a question that was asked 4 years ago. It's great that you're willing to help people, but in this case it's old news.
LazyCarrot spent three posts talking to himself and then never came back.

He had the solution in his second post. Do not put the codes for the images on separate lines. In the third post he added much coding to the problem and got the same results. So he fixed his own problem, but you didn't.

When you set width: 200px; for the container you defeated anything from working. The first image will over flow the DIV and the second can never be by it's side. Everything else you did works on the container and not the contents.

Here are the methods I know of to remove the 4 not 6px space between images. Which is normal to have.
Use a negative margin on the img in the CSS:
img{margin-right: -4px;} -- If you have something after the images you need to be mindful.

add font-size: 0; to the #frame-container{...}

Or as LazyCarrot did, put the img codes on one line. Not good if you have a whole bunch of images.

None of these methods works at all if you want a responsive site. One should study flex box or css grid.