Skip to main content
Participant
September 24, 2019
Answered

how to add space between pictures

  • September 24, 2019
  • 3 replies
  • 1976 views

How do I add space between pictures that are posted beside it other.  I do not have an option for border on my program that I can see.

    This topic has been closed for replies.
    Correct answer Jon Fritz

    A CSS margin setting would be the simplest way:

    https://www.w3schools.com/Css/css_margin.asp

    You could also use the various setting in CSS Flexbox's Align-Content property:

    https://www.w3schools.com/css/css3_flexbox.asp

    3 replies

    Nancy OShea
    Community Expert
    Community Expert
    September 24, 2019

    Review the CSS Box Model.  

    https://www.w3schools.com/css/css_boxmodel.asp

     

    Nancy O'Shea— Product User & Community Expert
    Legend
    September 24, 2019

    Depends how you have your images set up.

     

    You could apply a margin directly to the images:

    <img src="image_left.jpg" alt="" style="margin-right: 20px;">

    <img src="image_right.jpg" alt="" style="margin-left: 20px;">

     

     

    You could add a class to the images:

    <img class="imgLeft" src="image_left.jpg" alt="">

    <img class="imgRight" src="image_right.jpg" alt="">

     

    Then use some css selectors:

    .imgLeft {

    margin-right: 20px;

    }

    .imgRight {

    margin-left: 20px;

    }

     

    You could wrap your images in a container:

    <div class="images">

    <img src="image_left.jpg" alt="">

    <img src="image_right.jpg" alt="">

    </div>

     

    Then use flex to align them:

    images {

    display: flex;

    justify-content: space-between;

    }

     

     

    If you happen to be using Bootstrap you could use the inbuilt classes:

    <img class="mr-2" src="image_left.jpg" alt="">

    <img class="ml-2" src="image_right.jpg" alt="">

     

     

     

     

    Jon Fritz
    Community Expert
    Jon FritzCommunity ExpertCorrect answer
    Community Expert
    September 24, 2019

    A CSS margin setting would be the simplest way:

    https://www.w3schools.com/Css/css_margin.asp

    You could also use the various setting in CSS Flexbox's Align-Content property:

    https://www.w3schools.com/css/css3_flexbox.asp