Moving images through css

New Here ,
Mar 18, 2021 Mar 18, 2021

Copy link to clipboard

Copied

I'm trying to move an image and add padding and margins through css, but I can't  connect that command to the image. I'm basically putting a command and not moving any images.

Views

79

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
community guidelines
Adobe Community Professional ,
Mar 18, 2021 Mar 18, 2021

Copy link to clipboard

Copied

without seeing your code, it's pretty complex to figurate what the problem can be and help you efficiantly.

here some helfull links about block (be aware that by default an IMG tag is an inline object and so, not display as block)

MDN about IMG tag

then about margin and passing

from CSS Tricks

from MDN

 

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
community guidelines
Adobe Community Professional ,
Mar 19, 2021 Mar 19, 2021

Copy link to clipboard

Copied

What is the CSS selector name you're using to target your image? 

#IDs are unique and can be used only 1 x per page.  However .classes are less specific and can be re-used as often as needed.

 

#uniqueID {

     padding 5%;

     margin-left: 25px;

}

 

.thumb {

     border: 10px solid #FFF;

     box-shadow: 2px 3px 1px #333;

}

 

HTML:

<img id="uniqueID" class="thumb" src="my_awesome_image.jpg" alt="description">

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

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
community guidelines
Adobe Community Professional ,
Mar 19, 2021 Mar 19, 2021

Copy link to clipboard

Copied

LATEST

I forgot to mention, after editing code you will need to save all documents with Ctrl / Cmd + S and hit F5 to refresh Live view.

Design view is not 100% accurate at rendering.

Document Toolbar > Design ViewDocument Toolbar > Design View

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

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
community guidelines