How to put an image "in the same line" as another-CodePudding

I'm doing this exercise to study, the goal is: I have 3 balls and 3 squares, I want to put the 3 balls in the squares using CSS. But here's the problem: https://i.stack.imgur.com/9Fygq.png

I'm trying to use padding-top: -??px; to put it there, but seems like the image cant go to the same "line" as the other one is.

Here is the CSS:

.main {
  background-image: url('fundo.png');
  background-repeat: no-repeat;
}

.imagem1 {
  padding-left: 283px;
  padding-top: 50px;
}

.imagem2 {
  padding-left: 530px;
  padding-top: 110px;
}

.imagem3 {
  padding-left: 1000px;
  padding-top: -150px;
}

CodePudding user response：

So here is the thing. You should not be using padding to align items horizontally.

A simple way is to use inline-block. Please check out how easy it is in the example below. You also need to set the width and potentially the height value of your images to be the same in the img tag. You can also use flex/flexbox here is an explaination if you do not want like this solution for some reason.

I want to emphasize that this is a generic solution, it may fix your problem, but it is best you provide HTML code for a more specific solution to your problem.

SOLUTION SIMPLIFIED AFTER COMMENT

#container {
  margin: 0 auto 0 auto;
  /* Setting the width may not be required in your case */
  width: 1000px;
}

<!-- Notice the images have a set width -->
<div id="container">

  <img src="https://external-content.duckduckgo.com/iu/?u=https://pbs.twimg.com/media/CYjenPGUoAAnp2t.jpg&f=1&nofb=1" width="200">

  <img src="https://external-content.duckduckgo.com/iu/?u=https://pbs.twimg.com/media/CYjenPGUoAAnp2t.jpg&f=1&nofb=1" width="200">

  <img src="https://external-content.duckduckgo.com/iu/?u=https://pbs.twimg.com/media/CYjenPGUoAAnp2t.jpg&f=1&nofb=1" width="200">

</div>

CodePudding user response：

Here is the:

<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div >
        <div >
            <img src="bola 1.png">
        </div>
        <div >
            <img src="bola 2.png">
        </div>
        <div >
            <img src="bola 3.png">
        </div>
    </div>
</body>

So, if i shouldnt be using padding, what should i do to solve this exercice?