Hey there!

I am really new to stack overflow, not very new, because I have used the program before, so please tell me if i need to fix anything or something I can improve apon!

So here is my task:
I want to place text here:

[image] text
[image]
[image]

but using float:right; does this:

[image]               text
[image]
[image]

and adding padding:{num}px; makes it like this:

[image]
[image]
[image]
                                               text

and any thing I try yields the same results. Is there way to do this?

OTHER

I have tried using this: <h1><img src="image.png">Text</h1> but that does this:

[image]
[image]
[image]text

CodePudding user response：

You can use float: left on the image. This will allow text right next to it.

CodePudding user response：

A combination of display: inline-block and vertical-align: top should do it.

.text {
  display: inline-block;
  vertical-align: top;
}

<div class="container">
  <img src="https://via.placeholder.com/150"/>
  <p class="text">Some text here</p>
</div>

CodePudding user response：

You might want to try something like this:

.imageflex { display: flex; }
.imageflexcontent { margin-left: 5px; margin-top: 0; }

<div class="imageflex">
  <img src="https://images.unsplash.com/photo-1487111023822-2e903e12f6f0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=387&q=80" height="280px">

  <p class="imageflexcontent">Photo by <a href="https://unsplash.com/@filipz?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Filip Zrnzević</a> on <a href="https://unsplash.com/s/photos/forest?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a></p>
</div>

Basically, put a flexbox around your image and text and it should have the layout you would like. You can change the margins if you would like the text to be more seperated.

If it doesn't work, you can do it with an inline block around the text, though it would be harder to get the results you are looking for.

display: inline-block