需要幫助設置文本邊距

若昂席爾瓦

我試圖稍微降低文本,所以我嘗試設置“margin-top”,但它不僅降低了文本,還降低了浮動圖像。我怎樣才能讓它只對文本應用邊距而不是左邊的圖像?

這是我正在使用的圖像:https : //prnt.sc/1uniniq

.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;
}
 <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>

當您使用float它時,它會導致其他元素的行為與此處的h1標籤開始行為不同inline正如你不能申請margin/paddinginline所以它適用於圖像標記。

所以這里通過使用display: inline-block. 由於使用內聯塊將在下一行呈現文本,因此定義了 awidth讓它在圖像之後呈現

margin 應用僅用於演示,您可以根據需要重新設計

建議不要使用floatproperty 而是可以使用flex gridproperty 來實現相同的

.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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章