html – How to make elements with different tags in the same line without space among them?-ThrowExceptions

Exception or error:

I’d like to put these elements in the same line and without space among them, like this:
Target to achieve

I tried to make a div or use a table, but I don’t have reached nice results because the elements have different tags…

So, this is my code:

.fa-search {
  color: #777777;
  background: #f7f7f7;
  border: 0.25px solid #a9a9a9;
}

.fa-check {
  border: 0.25px solid #999999;
  background: #eeffee;
}

[class*="fa-"] {
	width: 21.5px;
	height: 21.5px;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<input type="text" id="search_box" placeholder="Search...">
<i class="fa fa-search" id="search_button"></i>
<i class="fa fa-check" id="other_button"></i>
How to solve:

By adding a CSS flex like so:

.fa-search {
  color: #777777;
  background: #f7f7f7;
  border: 0.25px solid #a9a9a9;
}

.search_container {
  display: flex;
  flex-direction: row;
 }

.fa-check {
  border: 0.25px solid #999999;
  background: #eeffee;
}

[class*="fa-"] {
    width: 21.5px;
    height: 21.5px;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="search_container">
<input type="text" id="search_box" placeholder="Search...">
<i class="fa fa-search" id="search_button"></i>
<i class="fa fa-check" id="other_button"></i>
</div>

###

This is actually a lot more tricky than it should be. Let’s try to understand why these elements don’t line up step by step, then we can figure out what needs to be changed.

Note: this answer has academic value as it explains why the original code doesn’t quite work, but for a more practical solution, use flexbox as recommended in Kummer Wolfe’s answer

Using my browser’s computed style inspector, I can see that all these elements have a display value of inline-block. Normally the <i> element is just inline, but Font Awesome changed that with the fa class. Meanwhile, <input> elements are inline-block by default.

The vertical alignment of inline elements is set with the appropriately named vertical-align CSS attribute. Again, the browser’s computed style inspector tells us that for all these elements the property is set to baseline. This means the elements will be aligned so that the text they contain is aligned, like in the example below.

Since your elements are icons and not text, this isn’t really what you want. One thing you could do is set all these elements to be aligned based on their middle, with vertical-align: middle.

big, small { border: 1px solid blue; display: inline-block; }
.middle>* { vertical-align: middle; }
<p>Here <big>BIG</big> and <small>small</small> are aligned based on the bottom of the letters.</p>
<p class="middle">But here <big>BIG</big> <small>small</small> are aligned based on the middle of their box.

You’ll also need to make sure all elements have the same height so both their top and bottom borders line up perfectly. However, there’s yet another issue. By default, the height CSS property defines the height of the contents of an element, excluding border and padding. So even if you set the height of both the <input> and the <i> elements to the same thing, they won’t line up as they don’t have the same border and padding. I’m guessing you tried playing with the padding and borders using 0.5px values for that reason, but I wouldn’t recommend using half pixels if you want consistent behavior across browsers and devices.

If you want the height property to include the border and padding, you can instead set the element’s box-sizing attribute to border-box. This way, all you need to do is set both element’s height to be the same and you’re good to go.

input {
  box-sizing: border-box;
  height: 22px;
  vertical-align: middle;
}

.fa-search {
  background: #f7f7f7;
  border: 1px solid #a9a9a9;
  color: #777777;
}

.fa-check {
  background: #eeffee;
  border: 1px solid #999999;
}

.fa {
  box-sizing: border-box;
  cursor: pointer;
  height: 22px;
  line-height: 1.2;
  text-align: center;
  vertical-align: middle;
  width: 22px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<input type="text" id="search_box" placeholder="Search...">
<i class="fa fa-search" id="search_button"></i>
<i class="fa fa-check" id="other_button"></i>

To make things easier, a lot of web developers place this at the top of their CSS files, which ensures all elements use border-box by default.

html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

I just noticed you wanted to get rid of spaces between your elements. Yet another annoying thing about inline-block elements is that any whitespace in the code between them is collapsed into one space. If you don’t want any space between them, you need to remove the space in the code, or to put it in a comment.

input {
  box-sizing: border-box;
  height: 22px;
  vertical-align: middle;
}

.fa-search {
  background: #f7f7f7;
  border: 1px solid #a9a9a9;
  color: #777777;
}

.fa-check {
  background: #eeffee;
  border: 1px solid #999999;
}

.fa {
  box-sizing: border-box;
  cursor: pointer;
  height: 22px;
  line-height: 1.2;
  text-align: center;
  vertical-align: middle;
  width: 22px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<input type="text" id="search_box" placeholder="Search..."><!--
--><i class="fa fa-search" id="search_button"></i><!--
--><i class="fa fa-check" id="other_button"></i>

Yes, this is rather horrible, but it is the only solution when using inline-block elements…

But with all of that said, aligning form elements this way is especially tedious, and you still might get some inconsistencies between browsers. I would recommend using display: flexbox like others have recommended instead. You can learn more about flexbox here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Leave a Reply

Your email address will not be published. Required fields are marked *