CODEWITHSUNDEEP
htmlcssstyling
premkatta
premkatta

Reputation: 23

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

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.

Upvotes: 1

Views: 1160

Answers (2)

Vishnu
Vishnu

Reputation: 897

.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.

Upvotes: 0

AdityaSrivast
AdityaSrivast

Reputation: 1084

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.

Upvotes: 3

Related Questions