Spacing Between Images

Discussion in 'HTML and CSS' started by LazyCarrot, Apr 10, 2016.

  1. LazyCarrot

    LazyCarrot

    Joined:
    Apr 10, 2016
    Messages:
    4
    Likes Received:
    0
    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, Apr 10, 2016
    #1
    1. Advertisements

  2. LazyCarrot

    LazyCarrot

    Joined:
    Apr 10, 2016
    Messages:
    4
    Likes Received:
    0
    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, Apr 10, 2016
    #2
    1. Advertisements

  3. LazyCarrot

    LazyCarrot

    Joined:
    Apr 10, 2016
    Messages:
    4
    Likes Received:
    0
    ... 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.
     
    LazyCarrot, Apr 11, 2016
    #3
  4. LazyCarrot

    Parth_Munjpara

    Joined:
    Jan 22, 2020
    Messages:
    7
    Likes Received:
    0
    #frame-container{background: white;
    margin: auto;
    margin-top: 200px;
    margin-left: 10px;
    padding: 10px;
    width: 200px;}
     
    Parth_Munjpara, Feb 26, 2020
    #4
  5. LazyCarrot

    sunfighter

    Joined:
    Nov 27, 2019
    Messages:
    108
    Likes Received:
    14
    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.
     
    sunfighter, Feb 26, 2020
    #5
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.