This page demonstrates some aspects of using CSS. It uses an external style sheet (see page source), and demonstrates how the styles called for there may be tweaked.
I'm afraid this page doesn't "explain" as extensively as one of my usual pages. I hope, if you've made a bit of progress with CSS, that you will persevere anyway... be sure to look both at the page's source, and at the stylesheet. (https://sheepdogguides.com/css/PosnImages-WpFlag.css .. it's just a text file with a funny extension). The principles demonstrates here are "worthy of all (men) to be remembered".
Test of "this will take you to WP" icon indicator mechanism... Wikipedia's CSS page (Styling can insert an icon after selected-by-rule links. The CONDITIONAL SELECTION is case sensitive.)
The underlying image file which is being displayed needs NO WHITESPACE around the image when displayed as follows. Whitespace will be added by "the magic of" CSS. It will all (or at least mostly?) be "padding". This system is worth it JUST for freeing you from giving each image you prepare for your page a "matt" of white, to push adjoining text back.. but it has even greater dividends, in that you can easily tweak the whitespace between the image and the text to your heart's content.
I've been a grudging student of CSS until now, 3/18. "Why would I want this extra hassle? What was wrong with the old way?". At last, after several years' struggle, I begin to see why people like CSS. It is not ALL about unnecessary "bells and whistles".
Image test... centered. To see where content+padding ends, invoke border-style:dotted;, either with embedded or in-line. Remember that the ELEMENT, the result of the "img" tag extends further... there's the "margin" outside the border... but showing the extent of that is not so easy. (You can't change the margin's color.) (You may wish to add border-width:2px; to the over-ride, as well, which is what you have below. Sheet makes 1px the default. Sheet makes 1px the default, and on my screen, it was visible at that scale.) (Further to seeing extent of margins: A subtlety is involved in matters of top and bottom margins. What "they've" done is GOOD... but it may give beginners headaches!. Details at w3schools.com/...css_margin_collapse.asp. I can't sing the praises of the w3schools material too highly, by the way.
... and then the same again, with an inline style tweak. (See page's source)
... and with two further inline style tweaks...
... and with min-width, max-width tweaked... You'll need to make window wider beyond what makes this line.... fit on one line
(up to "one line") to see "max-width" kick in. (What started at "(up to..." will always be a second line.) Watch how the one below, with the tweaks, "shrinks and grows" differently compared to the ones above, as you make window you are using narrower and wider. (It stops shrinking, due to the "min-width" about the time this block of text begins to take 5 lines.
Image tests... One pushed to left, one to right. See earlier notes about switching border on and off. Note: Narrow margin left, wide right. Either (and anything else) can be over-ridden at page or element level. (Both of these have the border-style set to solid by an inline CSS modifier.) (Again, see notes with example for centered image.)
Lorem ipsum dolors sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id diam vel quam elementum pulvinar etiam non quam lacus. A erat nam at lectus urna. Penatibus et magnis dis parturient montes. Sed viverra tellus in hac habitasse platea dictumst vestibulum. Morbi tempus iaculis urna id. Libero volutpat sed cras ornare arcu dui vivamus arcu. Morbi tristique senectus et netus et malesuada fames.
Ac auctor augue mauris augue neque gravida. At ultrices mi tempus imperdiet nulla malesuada. Bibendum neque egestas congue quisque. Mauris pharetra et ultrices neque ornare aenean euismod elementum. Suscipit adipiscing bibendum est ultricies integer quis auctor elit.
Ut porttitor leo a diam sollicitudin tempor. Mi sit amet mauris commodo quis imperdiet massa tincidunt. Pellentesque elit eget gravida cum sociis natoque. Sapien faucibus et molestie ac feugiat sed lectus vestibulum mattis. Enim eu turpis egestas pretium aenean pharetra. Auctor eu augue ut lectus arcu bibendum at varius. Pellentesque id nibh tortor id aliquet lectus proin..
Moving on....
Same image... with NO padding left or right, but much more bottom. (Done with over-rides by IN-LINE styling.)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id diam vel quam elementum pulvinar etiam non quam lacus. A erat nam at lectus urna. Penatibus et magnis dis parturient montes. Sed viverra tellus in hac habitasse platea dictumst vestibulum. Morbi tempus iaculis urna id. Libero volutpat sed cras ornare arcu dui vivamus arcu. Morbi tristique senectus et netus et malesuada fames.
Ac auctor augue mauris augue neque gravida. At ultrices mi tempus imperdiet nulla malesuada. Bibendum neque egestas congue quisque. Mauris pharetra et ultrices neque ornare aenean euismod elementum. Suscipit adipiscing bibendum est ultricies integer quis auctor elit.
Ut porttitor leo a diam sollicitudin tempor. Mi sit amet mauris commodo quis imperdiet massa tincidunt. Pellentesque elit eget gravida cum sociis natoque. Sapien faucibus et molestie ac feugiat sed lectus vestibulum mattis. Enim eu turpis egestas pretium aenean pharetra. Auctor eu augue ut lectus arcu bibendum at varius. Pellentesque id nibh tortor id aliquet lectus proin.
Tristique magna sit amet purus. Vivamus at augue eget arcu dictum. Sit amet mattis vulputate enim nulla aliquet porttitor. A erat nam at lectus. Ultrices eros in cursus turpis massa tincidunt. Libero justo laoreet sit amet cursus. Nascetur ridiculus mus mauris vitae ultricies leo integer malesuada. Faucibus purus in massa tempor nec feugiat nisl pretium. Consequat interdum varius sit amet mattis. Feugiat nisl pretium fusce id velit ut tortor pretium viverra. Tempor id eu nisl nunc mi ipsum faucibus. Consectetur adipiscing elit pellentesque habitant morbi tristique senectus et netus. Consectetur adipiscing elit ut aliquam.
Moving on....
Same image, pushed to the right. Again... note the "unbalanced" (but good) left and right margins in the styling provided by the external style sheet. Which can be over-ridden inside this page, either globally (for the page), or element by element, as wanted.
....... P a g e . . . E n d s .....