Why there is a margin between two image?

Question

I have removed the margins of two images, but there is a margin between them. This is not annoying me at all. I am just interesting in why the margin is there. This is my first post at stackoverflow. I can not post the picture. The CSS code is as follows:

<html>
<head>
 <title>test</title>
 <meta charset="utf-8" />
 <style>
  img {
   width: 200px;
   background-color: red;
   border: 5px solid #333;
   padding: 20px;
   margin: 0;
  }
 </style>
</head>
<body>
 <p>
  <img src="timg1.jpg" id="photo1" />
  <img src="timg2.jpg" id="photo2" />
 </p>
</body>
</html>

score 4 · Answer 1 · answered Apr 10 '18 at 15:21

Because inline elements are sensitive to white space in your code. Just remove it:

img {
  width: 200px;
  background-color: red;
  border: 5px solid #333;
  padding: 20px;
  margin: 0;
}

<p>
  <img src="timg1.jpg" id="photo1" /><img src="timg2.jpg" id="photo2" />
</p>

Why there is a margin between two image?

1 Answers1