Question 200041 in Html Question posted in
Some basic documentation can be found here.

Html – css why has the white space on the left side?

I use the same "icon" class to justify the instagram icon image and yg entertainment logo image.
But why yg entertainment logo is at the different position with the instagram icon?

    <div class="incormation">
      <div class="instagram">
    <img class="icon" src="instagram.png"><a href="https://www.instagram.com/jennierubyjane/">J(@jennierubyjane)</a>
        </div>
    <div class="yg">
    <img class="icon" src="yglogo.png"><a href="Codeit.kr">YG entertainment</a></div>
      

.icon{
  width: 22px;
  margin: 0px 6px auto;
  display: block;
  float: left;
}

.instagram > a {
text-decoration: none;
color: #2A2F4F;
}

.allbums{
  width: 140px;
  height: 140px;
  margin-right: 4px;
}


.yg > a {
  text-decoration: none;
   color: #2A2F4F;
}

enter image description here

Tags:

2

Answers


  1. 0

    To position an element below a floated element, the clear property needs to be used.
    In your case:

    <div class="yg" style="clear:left">
    <img class="icon" src="pineapple.jpg"><a href="Codeit.kr">YG entertainment</a>
</div>
    Login or Signup to reply.
  2. 0

    The alignment issue is due to the images being floated left. The second image doesn’t clear the first one, therefore the second image is positioned to the right of the first one.

    However, I see no need to use float: left. The images are already contained inside a block-level div, and you can reduce the HTML by just using a line break <br>.

    .incormation img {
  width: 22px;
  margin: .25em;
  vertical-align: middle;
}

.incormation a {
  text-decoration: none;
  color: #2A2F4F;
}
    <div class="incormation">
  <div>
    <img src="https://placehold.co/22"><a href="#">J(@jennierubyjane)</a>
  </div>
  <div>
    <img src="https://placehold.co/22"><a href="#">YG entertainment</a>
  </div>
</div>

<hr>

<div class="incormation">
    <img src="https://placehold.co/22"><a href="#">J(@jennierubyjane)</a><br>
    <img src="https://placehold.co/22"><a href="#">YG entertainment</a>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search