Need help setting the margin of text-CodePudding

I'm trying to lower the text a little bit so I tried setting the "margin-top" but instead of lowering just the text, it also lowers the floating image. How can I make it so it just applies margin to the text and not the image to its left?

This is the image I'm using: https://prnt.sc/1uniniq

This is the HTML:

 <div class="container3_div">
        <img
          class="phone_app"
          src="images/Apple_.jpg"
          alt="A iPhone displaying the youTunes app"
        />
        <h1 class="apple_header">Download the latest version from the Microsoft Store or the App Store.</h1>
      </div>

This is the CSS:

.container3 {
  background-color: rgb(250, 250, 250);
  width: 100%;
  height: 700px;
}

.container3_div {
  margin: 7rem;
}

.phone_app {
  width: 30rem;
  float: left;
}

.apple_header {
  font-size: 3rem;
  font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica",
    "Arial", sans-serif;
  
  color: #1d1d1f;
}

CodePudding user response：

You could either change the margin bottom instead or you could change the top. For example:

.container3_div {
    margin-bottom: 7rem;
}

.apple_header {
    top: 60%
}

Something along the lines of that.

CodePudding user response：

As you have used float it leads to other elements behave differently like here h1 tag start behaving inline . As you can't apply margin/padding on inline tag so it is applying to image .

So here change that by using display: inline-block . As using inline block will render text in next line so defined a width to let it render after image

margin applied is only for demo , you can restyle as you need

It is adviced not to use float property instead you can use flex grid property to achieve the same

.container3 {
  background-color: rgb(250, 250, 250);
  width: 100%;
  height: 700px;
}

.container3_div {
  margin: 7rem;
}

.phone_app {
  width: 30rem;
 
}

.apple_header {
  font-size: 3rem;
  font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  color: #1d1d1f;
  background-color:red;
  display:inline-block;
  margin-top:200px;
  width: 30rem;
}

<div class="container3_div">
  <img class="phone_app" src="http://gadgetsin.com/uploads/2017/09/apple_iphone_x_2.jpg" alt="A iPhone displaying the youTunes app" />
  <h1 class="apple_header">Download the latest version from the Microsoft Store or the App Store.</h1>
</div>