英文:
Why aren't the images in my flex column touching?
问题
我想要两列两行，第一行在第一列中有文本，然后在第二列中有一张图像，第二行在第一列中有一张图像，第二列中有文本。
我想要图像的角触碰以创建完美的网格，但无论我做什么，它们似乎永远不会触碰。
以下是代码：
<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>这里是文本内容。</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>这里是文本内容。</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>
我的网站上，图像的角总是几乎接触但不完全接触 
最初我使用了填充，但我已将其删除（在类.left、.right中），这使得情况有所改善（角几乎接触），但仍然只是几乎。
英文:
I want to have two columns two rows, with the first row with text in the first column, then an image in the second, and the second row with an image in the first column and text in the second.
I want the corners of the images to touch to create a perfect grid, and it's driving me crazy that no matter what I do they never touch.
Here's the code:
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>
screencap of the corners of the images in my code
In my website the corners are always almost touching but not quite there
Originally I had padding but I removed it (in classes .left, .right) and that made it better (the corners are almost touching now) but it's just that, almost.
答案1
得分: 0
line-height属性似乎是导致这个小间距的原因，你可以通过将该属性移到包含文本的类来解决。
英文:
The line-height property seems to be what is causing that small margin, you can fix it by moving the property to the class that contains the text
.block {
line-height: 0;
}
.block-info-content {
line-height: 24px;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论