• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

how to add space between pictures

New Here ,
Sep 24, 2019 Sep 24, 2019

Copy link to clipboard

Copied

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.

Views

1.6K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Sep 24, 2019 Sep 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

Votes

Translate

Translate
Community Expert ,
Sep 24, 2019 Sep 24, 2019

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 24, 2019 Sep 24, 2019

Copy link to clipboard

Copied

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="">

 

 

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 24, 2019 Sep 24, 2019

Copy link to clipboard

Copied

LATEST

Review the CSS Box Model.  

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

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines