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

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

123

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 ,
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

 

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 ,
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— 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
Community Expert ,
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— 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