我試圖稍微降低文本,所以我嘗試設置“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/padding
上inline
所以它適用於圖像標記。
所以這里通過使用display: inline-block
. 由於使用內聯塊將在下一行呈現文本,因此定義了 awidth
讓它在圖像之後呈現
margin
應用僅用於演示,您可以根據需要重新設計
建議不要使用
float
property 而是可以使用flex
grid
property 來實現相同的
.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] 删除。
我来说两句