I'm basically trying to put a header and then like 150px under it the image with its caption. However my text is attaching to the image and moves down with it.

figure {
  text-align: center;
  font-style: italic;
  padding-top:
}

img {
  width: 500px;
  margin: 0.5em;
  padding: 0.5em;
}

h1 {
  font-family: Georgia;
  margin-top: -300px;
  text-align: center;
}

<link href="D:\Documents\Coding\html-css practice.css" rel="stylesheet" type="text/css">
<title>Cod vanguard review</title>
<div>
  <figure>
    <img src="https://www.callofduty.com/content/dam/atvi/callofduty/cod-touchui/blog/hero/vgd/VGD-Campaign-Overview-TOUT.jpg">
    <figcaption>
      The Campaign Image For The New Call Of Duty
    </figcaption>
  </figure>
</div>
<div>
  <h1>Call of duty vanguard review</h1>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Just invert your divs ...

figure {
  text-align: center;
  font-style: italic;
  padding-top:
}

img {
  width: 500px;
  margin: 0.5em;
  padding: 0.5em;
}

h1 {
  font-family: Georgia;
  text-align: center;
  margin-bottom: 150px;
}

<link href="D:\Documents\Coding\html-css practice.css" rel="stylesheet" type="text/css">
<title>Cod vanguard review</title>
<div>
  <h1>Call of duty vanguard review</h1>
</div>
<div>
  <figure>
    <img src="https://www.callofduty.com/content/dam/atvi/callofduty/cod-touchui/blog/hero/vgd/VGD-Campaign-Overview-TOUT.jpg">
    <figcaption>
      The Campaign Image For The New Call Of Duty
    </figcaption>
  </figure>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Placing your "header" above the image would help. Then give the header a margin-bottom with the desired amount of pixels. Placing it under the image and creating a negative margin-top is an anti-pattern

figure {
  text-align: center;
  font-style: italic;
  padding-top:
}

img {
  width: 500px;
  margin: 0.5em;
  padding: 0.5em;
}

h1 {
  margin-bottom: 150px;
  font-family: Georgia;
  text-align: center;
}

<link href="D:\Documents\Coding\html-css practice.css" rel="stylesheet" type="text/css">
<title>Cod vanguard review</title>
<div>
<div>
  <h1>Call of duty vanguard review</h1>
</div>
  <figure>
    <img src="https://www.callofduty.com/content/dam/atvi/callofduty/cod-touchui/blog/hero/vgd/VGD-Campaign-Overview-TOUT.jpg">
    <figcaption>
      The Campaign Image For The New Call Of Duty
    </figcaption>
  </figure>
</div>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

That should work if you simply put <h1> above <figure> like this.....

<div>
  <h1>Call of duty vanguard review</h1>
  <figure>
     <img src="https://www.callofduty.......">
     <figcaption>
        The Campaign Image For The New Call Of Duty
     </figcaption>
  </figure>
</div>