I'm building a periodic table in HTMl/CSS and I cant get the text inside the large .element-symbol to align left with the .atomic-weight, .element-name and .atomic-symbol without an arbitrary text-indent. I guess this is just to do with the width of the letters, but is there a way of having the first letter in .element-symbol start hard left? i.e against the red border
Markup:
<div class="cell">
<div class="atomic-number"><span>2</span></div>
<div class="element-symbol">
<abbr>He</abbr>
</div>
<div class="element-name"><span>Helium</span></div>
<div class="atomic-weight">4.002602</div>
</div>
CSS: (red borders to show alignment issue)
* {
padding: 0;
margin: 0;
box-sizing: border-box;
line-height: 1;
}
.cell {
border: 1px solid black;
font-family: sans-serif;
width: 280px;
height: 280px;
margin: 20px auto;
padding:10px;
background-color: #4DBCE9;
}
.element-symbol {
font-size: 173px;
border: 1px solid red;
font-weight: 400;
/*text-indent: -12px; dont want to use this*/
}
.atomic-number, .atomic-weight, .element-name {
font-size: 25px;
border: 1px solid red;
}
Example in codepen
Each glyph in a font, sits within a bounding box. The glyph is usually not hard up against any of the edges of that box, and each glyph (or letter) will have differing amounts of space around it to help space it naturally when it is combined with other glyphs to form words.
Have a look at http://www.freetype.org/freetype2/docs/glyphs/glyphs-3.html to get a feel for some of the intricacies of type design.
I'm not aware of any text or font properties in CSS that can eliminate that space, and in any case that space will be different for each glyph, and different between the same glyphs in different fonts.
You're right - it's simply because of the size of the letters.
In most fonts, each character has a small amount of whitespace to either side of it, to separate it from adjacent letters. Without this space the letters would just run in to each other. At large font sizes, this space gets to be fairly significant, and produces the effect you're seeing. The only other option would be to find (or create) a font that doesn't have that space (or perhaps only has trailing space after each letter and no leading space).
Related
I would like to have a spacing between a h1 and a span, which should be 30px. It should be 30px from the bottom of the letters from the h1 to the top of the letters of the span, which comes below the h1, here a picture where the spacing of 30px should be (blue box shows spacing):
My h1 and span have some line-height. I made a border around it, so the line-height is visible. If I set now a margin-bottom of 30px to the h1 it looks like this:
The spacing begins at the end of the h1 element and ends at the start of the span element. The line-height is between the start/end of the element and the letters. So the spacing includes also the line-height and it is not exactly 30px. What's the best way to solve this? I know, that I could set the margin-bottom like this: margin-bottom: 30px - [LINE-HEIGHT]; But how can I know, how much the two red boxes (line-heights) are, to subtract it correctly so that the spacing becomes exactly 30px?
h1 {
font-family: Arial;
font-size: 45px;
line-height: 54px;
letter-spacing: 0;
color: darkred;
border: 1px solid black;
margin: 0 0 30px;
}
span {
font-family: Arial;
font-size: 30px;
line-height: 39px;
letter-spacing: 0;
color: gray;
border: 1px solid black;
}
<h1>Default main title</h1>
<span>Proin eget tortor risus. Vivamus magna justo, lacinia</span>
Here is my codepen example: https://codepen.io/STWebtastic/pen/QarjJO
I hope this is clear enough.
hmmm not really how internet typography works.
Setting line-height:100%; margin:0; padding:0; and box-sizing:border-box; (so the borders are not added to the height) will get you somewhat closer.
But the real problem is that in browsers, line-heights include the spacing reserved for descenders (think the bottom parts of q, j, g)and ascenders. Plus some extra bits that I cannot really explain. I'm no designer, even less of a font expert.
So the only way you can actually achieve what you'r looking for is by adjusting the line-height with magic numbers (those that you get from trial and error) to a lower value than your actual font-size. The right value is normally in the ballpark of 68-70%, but there's no formula valid for any font size, let alone any font.
body {
font-family: Arial;
}
*{
box-sizing:border-box;
}
h1 {
font-size: 45px;
line-height:31px;
letter-spacing: 0;
color: darkred;
border: 1px solid black;
margin: 0 0 30px;
}
p {
font-size: 30px;
line-height:21px;
color: gray;
}
h1, p{
padding:0;
margin:30px 0;
border: 1px solid black;
}
<h1>Default qgj main Title</h1>
<p>Proin eget tortor risus. Vivamus magna justo, </p>
this is, of course, extremely fragile and prone to issues. So your best bet to achieve something somewhat similar is to keep using magic numbers in the margins instead.
There are some formulas out there to make your guesses easier, but they are really dependant on your selected font, font size, etc.So again, magic numbers.
I think you should read this first: https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align
As you can see, a font itself has a certain line height (the white space between the character and the bottom border). So if you set the font-size: 45px and line-height:45px there will still be a white space (try it in your fiddle and inspect the element for proof). It has to do how the font was rendered by the em-square, which is not proportional.
You can choose a font that has characters which use the entire em-square. But I don't know how easy is to find this...
As far as I can tell, the best you can do is indeed what already was suggested: trial and error until you figure 30px.
Some characters such as the lowercase j or g have a "descender". Thus your question is flawed to begin with because you don't seem to account for those descenders which are part of font height.
To simplify the question, you’re asking: How do I ensure that there is a 30px space between the baseline of an h1 element and the cap line of a span below it?
It looks like there is a nifty project on GitHub called cap-height that can help you with this as long as you’re loading your typefaces using Web Font Loader.
You can calculate the cap height of both your h1 and your span, set their respective line-height to match their cap heights, and then add padding-bottom: 30px to your h1. You’ll also want to set margin: 0 so that you’re eliminating any vertical space between the two elements.
Here’s a fiddle example of this that I did manually.
This is my problem in short: https://jsfiddle.net/b6wLwkfs/
Long story: I have a div with some text in it. It initially creates some space on top and bottom of my div (this is not padding). I would like my div to only cover the text and not create extra space. This is my only css:
div {
background-color: black;
color: white;
font-size: 50px
}
<div>This is the text</div>
What I am looking for is to narrow down the div to only contains the text without creating any space on top of bottom. I acknowledge that if you tweaking a bit with px, you will achieve that but I am looking for more generic approach since font size will be different by cases.
Your code below is missing a (;) after font-size: 50px; now to achieve the space reduction I suggest you use line-height with the same font-size refer to my correction
Your Code
div {
background-color: black;
color: white;
font-size: 50px
}
My Correction
div {
background-color: black;
color: white;
font-size: 50px;
line-height: 50px;
}
There is likely no 'generic' way to do this, as that spacing you're seeing is actually part of the font face, and whatever adjustments you make to solve the 'problem' for this font, will not necessarily work on other fonts.
For example, just take a look at how Arial displays, as it's different than the default font that is used without setting a specific font-family, and as such a fix for the default font would likely have to be adjusted for Arial.
p {
background-color: black;
color: white;
font-size: 50px;
line-height: 1;
font-family: arial;
display: inline;
}
<p>
Oh hi i'm different
</p>
In the above snippet I've added a line-height of 1 to help normalize the spacing a bit. You could try to adjust further with setting the line-height to be at, or close to the exact font-size in pixels, but this will likely result in undesired spacing if you have lots of text in the element (text should also be in an appropriately semantic element like a p, or li, not just in a div).
In the end, can you achieve the result you're looking for? Definitely. Using things like line-height, margins and/or transforms. But you are likely not going to find a silver bullet to achieve the effect you want, consistently, if swapping out font faces.
As Sebastian Brosch mentioned in the question's comments, working off from Is it possible to change inline text height, not just the line-height? is likely going to be your best path forward.
Ok so I found out that the text inside an <input> tag still gets cut off even though the <input> tag already has a padding. You'll notice it more when you set your font style to anything cursive.
Take a look at this image:
The first text box in the screenshot is an input of type=text and the second text box is just a div. The input text box cuts off the tail of character 'j', while the div text box does not.
HTML:
<input type="text" value="juvenescent" />
<div>juvenescent</div>
CSS:
input, div {
font-family: cursive;
font-size: 2em;
padding: 15px 20px;
margin-bottom: 10px;
width: 300px;
border: 1px solid black;
}
div {
background-color: white;
}
Here is a link to the jsfiddle:
https://jsfiddle.net/9eLzqszx
What would be the workaround here? Obviously, I want the padding of the input text box to NOT cut the text inside it.
It looks like the curve of the J goes past the left-hand side of what the browser considers to be the edge of the letter. Instead of using padding for both sides, use padding for top/right/bottom and instead use text-indent for the left, it should do the trick!
input {
font-family: cursive;
font-size: 2em;
padding: 15px 20px 15px 0;
font-style:italic;
margin-bottom: 10px;
width: 300px;
border: 1px solid black;
text-indent: 20px;
}
https://jsfiddle.net/will0220/pxrs321f/3/
An input element is a special element as it needs to cut and allow the user to navigate through its text. Its active text zone isn't increased by the padding, and that's why you're seeing this behavior. Firefox seems to be more clever than the bunch, as it doesn't vertically cut the text if the text's width is smaller than the input's active text zone.
A workaround would be to add text-indent and decrease padding-left:
text-indent: 5px;
padding-left: 15px; /* Originally 20px */
You can see it in a fiddle over here.
You could try increasing your line height property. That would be restricting the viewable area for the letters causing them to be cut off. However, that's probably a crappy hack if you want it to match the same size as your div.
Add height: auto; to your input type=text to keep flexibility, and change the padding to get the original effect, like this padding: 14px 20px;
I'd like to display a read-only block of text as part of an HTML page - as it happens, it will be the monospaced text of the user's Git commit message - and while I want to display the text without wrapping, I would like to display a vertical line-length guide at 72 characters, so it's clear to the user when their lines have gone over the recommended length.
In some cases, the user will have entered lines of text much wider than the viewport.
Can I achieve this kind of effect with CSS?
(as an aside, I'm not drastically in favour of the text-wrapping guidelines, but my users need to be aware of them)
It's not really that practical to do it via CSS, as css doesn't give you any type of an nth-character selector. You could only draw a line at a fixed width which would be a best guess at your font character width.
However, if you're ok using a small amount of javascript, it could easily be done.
Here is a code sample I made for you showing how: http://codepen.io/beneggett/pen/GJgVrp
SO wants me to paste the code here as well as codepen, so here it is:
HTML:
<p>Example of syntax highlighting code at 72 characters w/ minimal javascript & css.</p>
<pre>
<code>
Here is my really awesome code that is nice
and it is so cool. If you are actually reading this, well I praise you for bearing with me
as you can see there is some short code
and some really, really, really, really, really, really, really, really, long boring code that is longer than 72 characters
it just goes on forever and ever and ever and ever and ever and ever and ever and ever and ever
The nice thing is we can tell our users when the code is short
or when it is getting way way way way way way way way way way way way way way way way way way way too looonggggg
oh wait, this isn't really code, it's just some gibberish text. but that's ok; the point is well made
i could go on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on, but you'd get tired of it
That's it for now
</code>
</pre>
<p> This is just a simple example using tools that I'm comfortable with. There may be better methods to suit your needs, but it's a good start</p>
CSS:
pre{
white-space: pre;
background: #ececec;
border: 1px solid #c3c3c3;
overflow: auto;
}
pre .long{
border-left: 1px dotted red;
color: red
}
JS (CoffeeScript):
$(document).ready ->
lines = $('pre code').text().split('\n') # First we'll find all the lines of code
$('pre code').text('') # then, remove the old code, as we're going to redraw it with syntax highlighting
$.each lines, (n, elem) -> # Loop through each line
if elem.length > 72 # If it's longer than 72 characters, we'll split the good_code and the long_code then add some html markup to differentiate
good_code = elem.substring(0,71)
long_code = elem.substring(71)
$('pre code').append "#{good_code}<span class='long'>#{long_code}</span>\n"
else # otherwise we will just keep the original code
$('pre code').append elem + '\n'
This was just a simple illustration using tools that are simple for me; but the point is to illustrate it's pretty simple code that could easily be adapted to what you're trying to do.
Use a monospaced typeface like courier new, figure out how wide 72 characters is and lay a div underneath your text with that width and dashed right border.
As said by Ben Eggett use Monospaced fonts because
"A monospaced font, also called a fixed-pitch, fixed-width, or non-proportional font, is a font whose letters and characters each occupy the same amount of horizontal space."
Even 'l' and 'm' occupy the same space. So find out how much width each char occupies based on the font size you are using and the vertical line at that place of the container.
For other fonts the widths for each characters are different and since CSS is static you cannot do with just css.
Below jsfiddle link provides example of implementation using monospaced font "Courier New"
http://jsfiddle.net/mnLzyy2x/
<div class="git-msgs-container">
<p>I want to take a moment to elaborate on what makes a well formed commit message. I think the best practices for commit message formatting is one of the little details that makes Git great. Understandably, some of the first commits to rails.git have messages of the really-long-line variety, and I want to expand on why this is a poor practice.</p>
<div class="separator"></div>
</div>
Css is
.git-msgs-container {
width: 900px;
border: 1px solid red;
font-family: 'Courier New';
font-size: 15px;
position: relative;
}
p {
margin: 0;
padding: 0;
}
.separator {
height: 100%;
border-left: 1px solid blue;
position: absolute;
top: 0;
left: 648px;
}
Enhancing Kalyan Kumar S's recipe.
Here is fiddle: http://jsfiddle.net/4mu5Lwex/
HTML:
<div class="git-msgs-container">
<p>I want to take a moment to elaborate on what makes a well formed commit message. I think the best practices for commit message formatting is one of the little details that makes Git great. Understandably, some of the first commits to rails.git have messages of the really-long-line variety, and I want to expand on why this is a poor practice.</p>
<p>_________1_________2_________3_________4_________5_________6_________7_________</p>
<p>1234567890123456789012345678901234567890123456789012345678901234567890123456789</p>
</div>
It looks that for a font-size of 10pt, the width of the each character is 6pt so the vertical line is at 72x6 = 432pt.
CSS:
.git-msgs-container {
width: 900px;
border: 1px solid red;
font-family: 'Courier New';
font-size: 10pt;
position: relative;
}
.git-msgs-container p::after {
display:block;
position: absolute;
left: 432pt;
top: 0;
margin-top: 0;
height: 100%;
border-left: 1px solid blue;
content: '';
}
Many of these suggestions will work most of the time. But positioning at absolute pixels will break if the user has set their default font size to something other than what you had intended.
Use a scalable unit like em or rem to set your font size. Then figure out how many ems or rems a single character width is, and position your vertical line marker at 72 x the character width.
example:
div#container {
position: relative;
font-size: 1rem;
}
if you haven't changed your default font size, 1rem will equal 16px. (If you have, reset you font-size to default in your browser before continuing) Now measure a single character, or a line of characters and average it out. (take a screenshot and pull it into Photoshop or Gimp to do this) Divide the single character width by 16, and you'll get the character width in rem.
eg:
character width = 9px;
9 / 16 = 0.5625rem;
multiply by 72 to figure out positing:
72 characters = 0.5625 * 72 = 40.5rem
now position your vertical line:
div#container .verticalLine {
position: absolute;
top: 0rem;
left: 40.5rem;
}
This sets up the positioning based on font size, not pixels. So it will scale with the font size accordingly.
If you want a large font-size (say 1.5rem), then multiply your calculated 72 character by the desired font size.
40.5rem * 1.5 = 60.75rem
n.b. If you don't want to measure exactly, or you don't have a graphics program, then you can just adjust the positioning by trial and error until it's positioned in the right spot.
You definitely want a monospaced font. You can include one like Paul Hunt's Source Code Pro (Google Fonts) with the following CSS:
#import url(http://fonts.googleapis.com/css?family=Source+Code+Pro);
Then, structure your commit message in a div like the one below. (Note the empty guide div):
<div class="commit-message">
Commit message goes here.
<div class="guide"> </div>
</div>
..and apply this CSS:
.commit-message {
font-family:"Source Code Pro", sans-serif;
font-size: 12px;
position: relative;
}
.commit-message .guide {
position: absolute;
top: 0;
height:100%;
width: 43em;
border-right: 2px dashed red;
}
Depending on the font-size you apply in the first rule, you may need to adjust the width in the second rule.
Here's a fiddle showing it in action: http://jsfiddle.net/yjjybtLu/4/
A pre-calculated distance for the "red line" doesn't seem reliable to me.
A background with 50 characters in exactly the same font as used in the textarea might do the trick.
This suggestion still relies on a fixed height for the background, which is not good if the height of the textarea needs to be flexible.
<style type="text/css">
* {
font-family: monospace;
}
.textarea-wrapper {
position: relative;
width: 600px;
height: 400px;
overflow: hidden;
background-color: #fff;
}
textarea {
position: absolute;
width: 600px;
height: 400px;
background-color: transparent;
border-width: 2px;
}
span {
position: absolute;
top: 2px;
left: 2px;
display: block;
width: auto;
height: 100%;
border-right: 2px dotted #fcc;
color: #fff;
}
</style>
<div class="textarea-wrapper">
<span>01234567890123456789012345678901234567890123456789</span>
<textarea readonly="readonly">01234567890123456789012345678901234567890123456789 - 50 characters and more
</textarea>
</div>
Please read the question carefully. It's not the same as the one about How to remove the space between inline-block elements.
Consider the following HTML:
body {
/* font-family: Arial; */
}
.my-class {
display: inline-block;
margin: 0 0 0 -4px;
background-color: transparent;
border: 1px solid #ccc;
padding: 20px;
}
<div>
<button class="my-class">Hello</button>
<button class="my-class">Stack</button>
<button class="my-class">Overflow</button>
</div>
Which produces:
But, if I add:
body {
font-family: Arial;
}
it results in a 1px space between the second and third buttons:
The question is: Why adding font-family to the body affects the space between the buttons?
It happens because each font has different width, even for the space character. You already know about the whitespace issues with inline-blocks. So, when you set Arial, those whitespaces change their width slightly from the browser's default font (or any other font with different width), which is Times New Roman in my case.
See how drastic the change is when you set the monospace font.
Now, why it happens between the 2nd and the 3rd box and not the 1st and the 2nd one? I'm pretty sure it comes down to rounding pixel values based on the width of the words entered, seems like there is a pseudo sub-pixel rendering present in the background, yet the decimal values get rounded in the final render process. See what happens if you use Arial and print Hell Stack Overflow instead of Hello Stack Overflow - the gaps look the same. So, it's just an undesired coincidence.
Another point that proves this is a rounding issue is the change in the gaps across various page zoom levels. It's fairly common to get these pixel mismatches in the layout when dealing with decimals in HTML. Zooming adds another dividing/multiplication stage, which changes the core values even further, resulting in completely unpredictable behaviour in the final layout.
It's because you're displaying the buttons as inline-block elements and when you have inline elements whitespace is significant and is rendered in the same way that spaces between words is rendered.
i.e inline-block makes whitespace significant, so spaces in the source between inline-block elements will be rendered.
For example: You could center the inline-block elements just by adding text-align: center; the same way is used to center the text in its parent block element. - DEMO
Why adding font-family to the body affects the space between the buttons?
Different fonts can have different spacing between words, If you compare font-family: monospace; with font-family: sans-serif; then you will see the monospace fonts have more space between words than sans-serif fonts and the inline-block elements is also rendered in the same way and have the spacing between elements.
Monospace DEMO
Sans-serif DEMO
The best way to remove the space between inline-block elements is adding the font-size: 0; to the parent element.
DEMO
div {
font-size: 0;
}
.my-class {
display: inline-block;
border: 1px solid #cccccc;
padding: 20px;
font-size: 16px;
}
<div>
<button class="my-class">Hello</button>
<button class="my-class">Stack</button>
<button class="my-class">Overflow</button>
</div>
The answer assumes that DirectWrite is enabled. You will not notice the specified symptoms and fractional widths otherwise. It is also assumed that default serif and sans-serif fonts are Times New Roman and Arial.
Whoever said that the space character is 4px wide is mistaken:
$(function() {
$(".demo").each(function() {
var width = $("span", this).width();
$("ins", this).text("total width: " + width + "px, " + (width / 10) + "px per space)");
});
});
.demo {
white-space: pre;
overflow: hidden;
background: #EEE;
}
.demo-1 {
font: 16px/1 sans-serif;
}
.demo-2 {
font: 16px/1 serif;
}
.demo-3 {
font: 16px/1 monospace;
}
.demo span {
float: left;
background: #CF0;
}
.demo ins {
float: right;
font-size: smaller;
}
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<p>The green blocks contain 10 spaces:</p>
<p class="demo demo-1"><span> </span><ins></ins></p>
<p class="demo demo-2"><span> </span><ins></ins></p>
<p class="demo demo-3"><span> </span><ins></ins></p>
Note that:
For a given size the character width depends on font family.
The character width does not necessarily have to be a whole number. Serif font gives you a nice whole number (4px), but Sans-serif font gives you fractional number (4.4px).
You could get different results in different browsers depending on how they handle fractional gaps between two blocks (e.g. 4.4px for 16px Arial). CSS specs are silent about this.
In Chrome with DirectWrite enabled, spaces are rendered as 4px and 5px alternately due to rounding off. This explains why there is no gap between first and second button and 1px gap between second and third. Try adding more buttons in your original example and notice how the pattern repeats (Demo).
Using margin-left: -4.4px seems to work but it is not guaranteed to work. Consider going back to the alternate solutions.
PROBLEM:
this happens because the display is set to inline-block.
inline-block is:
The element generates a block element box that will be flowed with
surrounding content as if it were a single inline box (behaving much
like a replaced element would)
»» see more about display property here: DISPLAY INFO
SOLUTION(S):
Remove the spaces
Negative margin
Skip the closing tag
Set the font size to zero
Just float them instead
Just use flexbox instead
For more details on each solution check
Fighting the Space Between Inline Block Elements
my preferred solutions from above is
Set the font size to zero
therefore is a snippet with your code and my preferred solution:
div {
font-size:0;
}
.my-class {
display: inline-block;
border: 1px solid #cccccc;
padding: 20px;
font:normal 12px Arial;
}
<div>
<button class="my-class">Hello</button>
<button class="my-class">Stack</button>
<button class="my-class">Overflow</button>
</div>
Plus, here is a snippet with your EXACT CODE only changing the font-family from body to the elements that have display:inline-block, and achieving the same output as my FIRST SNIPPET
.my-class {
display: inline-block;
margin-left: -4px; /* Remove the space between inline elements */
border: 1px solid #cccccc;
padding: 20px;
font-family:Arial;
}
<div>
<button class="my-class">Hello</button>
<button class="my-class">Stack</button>
<button class="my-class">Overflow</button>
</div>
EDIT:
OP's question:
Why adding font-family to the body affects the space between the
buttons?
in web typography there are:
Sans-serif
Fonts that do not have decorative markings, or serifs, on their letters. These fonts are often considered easier to read on screens.
Serif
Fonts that have decorative markings, or serifs, present on their characters.
Monospace
Fonts in which all characters are equally wide.
Cursive
Fonts that resemble cursive writing. These fonts may have a decorative appearance, but they can be difficult to read at small sizes, so they are generally used sparingly.
Fantasy
Fonts that may contain symbols or other decorative properties, but still represent the specified character.
Since Arial is a sans-serif font, therefore a non-fixed width font ( like monospace ), when applied to body with child elements displaying inline-block(without fix for the gaps) it will create space between the child elements.
Although if you apply the font-family to the child elements, like I DID in my 2ND SNIPPET it doesn't happen anymore.
one comment of an article:
The gap between inline elements is, as you suggest, a space character.
The width depends on the font (family, variant, etc.) and approximates
to .25em
you can check it here
the full article is below
ARTICLE
DEMO
The problem is that there are hidden spaces (a line break and a few tabs counts as a space, just to be clear) between tags. Minimize the HTML or comment the spaces out and everything will work correct:
body {
font-family: Arial;
}
.my-class {
display: inline-block;
margin-left: -4px;
border: 1px solid #cccccc;
padding: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div>
<button class="my-class">Hello</button><!--
--><button class="my-class">Stack</button><!--
--><button class="my-class">Overflow</button>
</div>
</body>
</html>
Check the demo and use this CSS. If you have not satisfied, just change the font size. It will get fixed.
body {
font-family: Arial;
font-size: 15px;
}
.my-class {
display: inline-block;
margin: 0 0 0 -4px;
background-color: ccc;
border: 1px solid #ccc;
padding: 20px;
}
<div>
<button class="my-class">Hello</button>
<button class="my-class">Stack</button>
<button class="my-class">Overflow</button>
</div>
See also JSfiddle.
I recommend to use
float:left
or
float:right
instead
display:inline-block;
use the below css for this:
.my-class {
display: inline-block;
margin-left: -4px;
border: 1px solid #cccccc;
padding: 20px;
margin-right:-1px;
}