Stop display inline block 3px yield

HTML & CSS
1

Can you make 3px space between 2 button disappear? Without floating them, because I need their inline property reserved

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.fl {float:left;}
.btn {
	display:inline-block;
	position:relative;
	-moz-border-radius:3px 3px 3px 3px;
	border-radius: 3px 3px; 
	background:-moz-linear-gradient(center top , #F9F9F9, #E3E3E3);
	background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F9F9F9), to(#E3E3E3));
	border:1px solid #BBBBBB;
	border-top:1px solid #CCCCCC;
	border-bottom:1px solid #A0A0A0;
	cursor:default;
	outline:none;
	padding:3px 8px;
	text-align:center;
	vertical-align:middle;
	white-space:nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	font-size:13px
}
.nbl {
	border-top-left-radius:0px 0px;
	border-bottom-left-radius:0px 0px;
	border-left:0;
}
.nbr {
	border-bottom-right-radius: 0px 0px;
	border-top-right-radius: 0px 0px;
}
</style>
</head>

<body>
    <div class="btn In nbr mb2" role="button" tabindex="0">Bigger Font Size</div>
    <div class="btn De nbl" role="button" tabindex="0" style="margin-left:0px !important">Smaller Font Size</div>
</body>
</html>
2

I’m not seeing a gap in Firefox. Are you sure that’s not just an illusion because of the background color and radius corner?

3

That’s cool, Paul. Can we eliminate 1px space in the middle as well ?

4

Wrap the buttons in a div that has font-size:0 set and then set the font-size on the children instead.


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.fl {
    float:left;
}
.btn {
    display:inline-block;
    position:relative;
    -moz-border-radius:3px 3px 3px 3px;
    border-radius: 3px 3px;
    background:-moz-linear-gradient(center top, #F9F9F9, #E3E3E3);
    background: -webkit-gradient(linear, 0&#37; 40%, 0% 70%, from(#F9F9F9), to(#E3E3E3));
    border:1px solid #BBBBBB;
    border-top:1px solid #CCCCCC;
    border-bottom:1px solid #A0A0A0;
    cursor:default;
    outline:none;
    padding:3px 8px;
    text-align:center;
    vertical-align:middle;
    white-space:nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    font-size:13px
}
.nbl {
    border-top-left-radius:0px 0px;
    border-bottom-left-radius:0px 0px;
    border-left:0;
}
.nbr {
    border-bottom-right-radius: 0px 0px;
    border-top-right-radius: 0px 0px;
}
[B].wrap {font-size:0}
p {margin:0}
* html .btn{display:inline}/* ie6*/
*+html .btn{display:inline}/* ie7*/[/B]

</style>
</head>
<body>
[B]<div class="wrap">
    <p class="btn In nbr mb2" role="button" tabindex="0">Bigger Font Size</p>
    <p class="btn De nbl" role="button" tabindex="0">Smaller Font Size</p>
</div>[/B]
</body>
</html>

Kills inheritance of course :slight_smile:

5

It is a confirmed webkit bug. They need to get it fixed!

Using font-size:0; as Paul pointed out will eliminate most of the gap but it still leaves that dreaded 1px.

The same thing happens when using word-spacing:-.5em; on the parent.

The only solution for webkit is to mutilate the html or run the children in one string (which is not always desirable for me) like Ryan pointed out.

6

You’re welcome :).

7

Cool thank you guys. :slight_smile:

8

You can close the white space in the HTML :slight_smile:

<div class="wrap">
    <p class="btn In nbr mb2" role="button" 

tabindex="0">Bigger Font Size</p><p class="btn De nbl" 

role="button" tabindex="0">Smaller Font Size</p>
</div>

Note no space between the two <p>'s

9

Oh, I mean in chrome…