CODEWITHSUNDEEP
css
Xabbu
Xabbu

Reputation: 3

Why won't this inline-block align all the way to the right?

I have a div with display:inline-block; and the container is text-align:right;, but there seems to be a space between the div and the right side of the container. Why won't it go all the way to the edge?

Here's the fiddle: https://jsfiddle.net/oqxm93c0/

My goal is for the black line and the text to be aligned on the right edge. Also, I prefer to use as little css as possible and tend to shy away from floats (especially if I have to use a "clearfix" type method).

Thx! :]

Upvotes: 0

Views: 181

Answers (1)

Michael Coker
Michael Coker

Reputation: 53709

An inline or inline-block element preserves white space in/around the element. To remove that space, the easiest way is to remove spaces between the inline-block elements in your HTML.

You could also put an HTML comment between the elements (if you want to maintain the code alignment/indents/etc), or set the parent's font-size to 0, then reset the font-size on the child elements.

.container {
  padding-top:6px;
  text-align:right;
  width:400px;
  background: #eee;
}
.line {
  width:100px;
  height:2px;
  background:black;
  display:inline-block;
}
<div class="container">
  <div class="line"></div><br><a href="#">Hello</a>
</div>

Upvotes: 1

Related Questions