Why, My HTML element is starting from the bottom, if i apply the display inline-block property?

Question

I want to generate the comments list like component, for that i have taken divs and applied display block and inline-block accordingly. But I don't know why my HTML element is starting from the bottom most position (If you increase and decrease you can figure it out).Pls help in this regards.

 .comment { color: red; } .imagePanel, .textPanel, .userName, .timeStamp { display: inline-block; } .userImage { width: 60px; } .userName a { font-size: 18px; font-weight: 800; color: unset; margin-right: 5px; } 

 <div className='mainCommentPanel'> <div className='imagePanel'> <img className="userImage" src='https://cdn.pixabay.com/photo/2015/03/04/22/35/head-659652_960_720.png' alt='userImage' /> </div> <div className="textPanel"> <div className="UserBox"> <div className="userName"><a>User Name</a></div> <div className="timeStamp">{new Date().toLocaleTimeString()}</div> </div> <div className="comment"> <p>This page is very cool!</p> </div> </div> </div> 

The element should start from the top most position in its mentioned height and width properties.

Answer 1

For inline-block , by default the vertical-align is set to baseline , set it to vertical-align: top and you'll be good to go! Cheers.

Answer 2

 .comment { color: red; } .imagePanel, .textPanel, .userName, .timeStamp { display: inline-block; } .userImage { width: 60px; } .userName a { font-size: 18px; font-weight: 800; color: unset; margin-right: 5px; } .imagePanel{ vertical-align:top; } 

 <div class='mainCommentPanel'> <div class='imagePanel'> <img class="userImage" src='https://cdn.pixabay.com/photo/2015/03/04/22/35/head-659652_960_720.png' alt='userImage' /> </div> <div class="textPanel"> <div class="UserBox"> <div class="userName"><a>User Name</a></div> <div class="timeStamp">{new Date().toLocaleTimeString()}</div> </div> <div class="comment"> <p>This page is very cool!</p> <p>This page is very cool!</p> <p>This page is very cool!</p> <p>This page is very cool!</p> <p>This page is very cool!</p> </div> </div> </div> 

you have to use class attribute instead of className.