Image corners not touching each other when they should

Question

I have a layout with an image on the left or right with the text next to it on the opposite side that when it stacks on mobile the text is always on the top.

For some reason unless the page is in Quirks mode the images don't touch each in the corners even though they should. The DIV ends up slightly taller than the image and I can't figure out why this is.

.site-feature-container {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    flex-flow: row;
    text-align: center;
    background: #FFFFFF;
}

.site-feature-image-section {
    width: 50%;
}

@media only screen and (max-width: 900px) { 
.site-feature-image-section {
    width: 100%;
}
}
    
.site-feature-info-section {
    width: 50%;
}

@media only screen and (max-width: 900px) { 
.site-feature-info-section{
    width: 100%;
}
}

.dmwp-work-content:nth-child(even){
    flex-direction: row-reverse;
}
    
.site-feature-container:nth-child(even){
    flex-direction: row-reverse;
}

@media only screen and (max-width: 900px) {
.site-feature-container {
    flex-direction: column-reverse !important;
}
}

.site-feature-image {
    width: 100%;
    max-width: 100%;
}

.site-feature-description {
    width: 90%;
    max-width: 90%;
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: auto;
    margin-right: auto;
}

<!DOCTYPE html>
<head>
<title>Layout</title>
</head>
<body>
<div class="site-feature-container">
   <div class="site-feature-image-section">
      <div class="site-feature-image">
         <img class="site-feature-image" src="https://via.placeholder.com/1920x1080" alt="">
      </div>
   </div>
   <div class="site-feature-info-section">
      <div class="site-feature-description">
         <p>TITLE</p>
         <p>DESC</p>
      </div>
   </div>
</div>

<div class="site-feature-container">
   <div class="site-feature-image-section">
      <div class="site-feature-image">
         <img class="site-feature-image" src="https://via.placeholder.com/1920x1080" alt="">
      </div>
   </div>
   <div class="site-feature-info-section">
      <div class="site-feature-description">
         <p>TITLE</p>
         <p>DESC</p>
      </div>
   </div>
</div>
</body>

It seems like it should be a relatively easy fix but I'm not too sure what exactly in the CSS is causing it, removing the Doctype declaration fixes it but obviously the page needs that.

Any help would be appreciated. Thanks in advance.

either display:block to the image or vertical-align:top .. the line-height is a hacky solution — Temani Afif, Jul 10 '20 at 22:28

iguypouf · Accepted Answer · 2020-07-10T22:17:36.010

1

This the famous problem of inline elements.

One way is to force the line-height to null :

.site-feature-image-section {
    line-height: 0;
}

Another way but that make your html less readable is to avoid spaces in your code between two following inline elements, like :

</div><div class="site-feature-info-section">

edited Jul 10 '20 at 22:17

answered Jul 10 '20 at 22:15

iguypouf

770
4
15

That's solved it, I don't know why this only happens outside of quirks mode. Thanks for the solve though, I'll accept when SO allows me to. – learningtoanimate Jul 10 '20 at 22:17
Sorry I'm not mean to disrespect your answer, just when i was posting my answer your answer was not loaded. if you want me to delte my answer, i will – Umutambyi Gad Jul 10 '20 at 22:21
@Gad No problem at all, we are here for sharing :) – iguypouf Jul 10 '20 at 22:26
@iguypouf thanks a lot – Umutambyi Gad Jul 10 '20 at 22:27

score 0 · Answer 2 · answered Jul 10 '20 at 22:27

Your image has space under it which is reserved for descender text elements. The easiest way to get rid of it is to set the vertical-align property to something other than the default of baseline. For example, vertical-align:top on the image:

.site-feature-container {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    flex-flow: row;
    text-align: center;
    background: #FFFFFF;
}

.site-feature-image-section {
    width: 50%;
}

@media only screen and (max-width: 900px) { 
.site-feature-image-section {
    width: 100%;
}
}
    
.site-feature-info-section {
    width: 50%;
}

@media only screen and (max-width: 900px) { 
.site-feature-info-section{
    width: 100%;
}
}

.dmwp-work-content:nth-child(even){
    flex-direction: row-reverse;
}
    
.site-feature-container:nth-child(even){
    flex-direction: row-reverse;
}

@media only screen and (max-width: 900px) {
.site-feature-container {
    flex-direction: column-reverse !important;
}
}

.site-feature-image {
    width: 100%;
    max-width: 100%;
    vertical-align:top;
}

.site-feature-description {
    width: 90%;
    max-width: 90%;
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: auto;
    margin-right: auto;
}

<!DOCTYPE html>
<head>
<title>Layout</title>
</head>
<body>
<div class="site-feature-container">
   <div class="site-feature-image-section">
      <div class="site-feature-image">
         <img class="site-feature-image" src="https://via.placeholder.com/1920x1080" alt="">
      </div>
   </div>
   <div class="site-feature-info-section">
      <div class="site-feature-description">
         <p>TITLE</p>
         <p>DESC</p>
      </div>
   </div>
</div>

<div class="site-feature-container">
   <div class="site-feature-image-section">
      <div class="site-feature-image">
         <img class="site-feature-image" src="https://via.placeholder.com/1920x1080" alt="">
      </div>
   </div>
   <div class="site-feature-info-section">
      <div class="site-feature-description">
         <p>TITLE</p>
         <p>DESC</p>
      </div>
   </div>
</div>
</body>

score -1 · Answer 3 · answered Jul 10 '20 at 22:23

-1

That also works:

.site-feature-image {
    width: 100%;
    max-width: 100%;
    display: flex;
}

answered Jul 10 '20 at 22:23

Dantcho

301
3
14

Image corners not touching each other when they should

3 Answers3