色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

為什么& # 39；我的flex專欄中的圖像不接觸嗎？

CSS
錢良釵1年前8瀏覽0評論

我希望有兩列兩行，第一行第一列有文本，第二列有圖像，第二行第一列有圖像，第二列有文本。

我想讓圖像的角接觸，以創建一個完美的網格，這讓我發瘋，無論我做什么，他們從來沒有接觸。

代碼如下: https://jsfiddle.net/zbqewcrx/

<body>
 
 <div>        
<div class="block reverse">
  <div class="block-info left">
    <div class="block-info-content">
      <div class="block-title">
        <h2>Title 1</h2>
      </div>
      <div class="block-text">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis tempus nibh. Sed eget lacinia lorem. Integer imperdiet sodales bibendum. Donec fermentum viverra orci, at scelerisque erat commodo sit amet. Nullam et blandit massa. Quisque gravida consectetur tristique. Sed eget tempor ante. Aliquam aliquet dolor porta suscipit elementum. Ut vel fringilla lacus.</p>
      </div>
    </div>
  </div>
  <div class="block-photo">
    <div class="block-img first">
      <img src="https://images.unsplash.com/photo-1607028227034-f0378aa1bd2c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=735&q=80">
    </div>
  </div>
</div>
<div class="block">
  <div class="block-photo">
    <div class="block-img">
      <img src="https://images.unsplash.com/photo-1607028227034-f0378aa1bd2c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=735&q=80">
    </div>
  </div>
   <div class="block-info right">
    <div class="block-info-content">
      <div class="block-title">
        <h2>Title 2</h2>
      </div>
      <div class="block-text">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis tempus nibh. Sed eget lacinia lorem. Integer imperdiet sodales bibendum. Donec fermentum viverra orci, at scelerisque erat commodo sit amet. Nullam et blandit massa. Quisque gravida consectetur tristique. Sed eget tempor ante. Aliquam aliquet dolor porta suscipit elementum. Ut vel fringilla lacus.</p>
    </div>
    </div>
  </div>
</div>
  </div>
  
</body>

<style>
body {
  margin: 0 20em;

}

h2, h3, h1, h4, p {
  margin: 10px 0;
  padding: 0;
}

.block {
  line-height: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: left;
}

.block-info, .block-photo {
  width: 50%;

}


.block-img img {
  width: 100%;
  height: 600px;
  object-fit: cover;
  
}
  
.block-info-content {
  text-align: left;
  padding: 2em;
}

.block-text {
  padding-top: 2em;
}
</style>

我的代碼中圖像邊角的屏幕截圖

在我的網站中，角總是幾乎接觸，但不完全在那里

最初我有填充，但我刪除了它(在課堂上)。左，。對)這使它變得更好(角落現在幾乎接觸)，但它只是，幾乎。

line-height屬性似乎是導致這種小邊距的原因，您可以通過將該屬性移動到包含文本的類中來修復它

.block {
  line-height: 0;
}

.block-info-content {
  line-height: 24px;
}