Highlighted

how to add space between pictures

New Here ,
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.

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

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

Views

203

Likes

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

how to add space between pictures

New Here ,
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.

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

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

Views

204

Likes

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
Sep 24, 2019 0
Adobe Community Professional ,
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

Likes

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
Reply
Loading...
Sep 24, 2019 2
LEGEND ,
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="">

 

 

 

 

Likes

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
Reply
Loading...
Sep 24, 2019 2
Adobe Community Professional ,
Sep 24, 2019

Copy link to clipboard

Copied

Review the CSS Box Model.  

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

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

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
Reply
Loading...
Sep 24, 2019 1