Css 图像无法适应

Question

why doesnt the image adapt to the css? My intention is make the picture go to the side a bit, thats why i tried the margin but yeah. Idk.

html

  
<div class="la">
  <center>
    <h1> GREET THE TEAM </h1>
  </center>
</div>

<img class="pic" src="duve.png">

</body>

</html>

css

.pic {
  height: 500px; 
  width: 250px;
  margin: 50px;
  border: 5px solid black;

}

can you help me make the picture go to the side a bit from the left? Ive tried a lot of things, but it wont work.

Answer 1

Here you should use: margin-left: 50px instead of margin: 50px , because margin:50px means your top, right, bottom and left of the image will have a 50px gap

Answer 2

This might be stupid but have you connected the CSS file to the HTML file you are working on?

For example, if your CSS file's name is style.css then inside the tag of the HTML file you have to have:

<link rel="stylesheet" href="style.css">

Edit: Be careful about the location of the HTML and the CSS files, if they are in different directories then you have to change the href accordingly.

Example, if style.css is higher than the HTML file in the file hierarchy then href should be href="../styles.css"