Error in CSS with display block

Navigation
2

I was doing a design for comments and I realized that there is an error when there is more than one comment, and it does not matter if I put them in different containers, the problem is that it creates a margin to the left. The container of the comments (comments) had only display: inline-block; , which generated conflict with the elements within the comment, making the comment smaller and making the user's name and time inline.

Example without inline-block

Example with inline-block 

.comment {
  display: block;
}

.comment img {
  float: left;
  vertical-align: middle;
  width: 45px;
  height: 45px;
  margin-right: 20px;
  border-radius: 50%;
  object-fit: cover;
}

.comment div {
  color: #6b6b6b;
  word-break: 100%;
  list-style: none;
  font-size: 15px;
}

.comment>div>span {
  font-size: 16px;
  color: #111111;
  font-weight: 600;
  display: block;
}

.comment>div>span>i {
  color: #8998a0;
  font-style: normal;
  font-size: 14px;
  font-weight: 500;
}
<span class="comment">
   <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQEB2FtrvN7ET73eX_u1lJVskBtXnClab0BsilHAJhFXT_0bNcOgA">
  <div>
    <span>Camila Cabello <i>Hoy, hace dos horas</i></span> She doesn't cry anymore
  </div>
</span>
    
asked by Esteban Fernández 29.03.2018 в 19:14
source

1 answer

4

The float:left that you have in the class comment is the one that generates that margin in the second comment, to solve it you can put the following code 

.comment{
    clear:left;
    display:block;
}
    
answered by 29.03.2018 / 20:28
source
Export data to Excel from MVC5 view how to return a string in c