Question

Can someone fix the top margin issue occurring in Firefox and Chrome…Need to fix 2 pixel margin in both browsers…Kindly check the same in chrome and Firefox…

Here is the link…

.smalCopybtn{float:left;text-decoration: none;color: #23699A;border: solid 1px #ccc;background-color: #ddd;background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#dddddd));
background-image: -moz-linear-gradient(top,  #ffffff,#dddddd);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dddddd');text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);
font:normal 11px Arial, Helvetica, sans-serif;-webkit-border-radius: 2px; -moz-border-radius:2px;border-radius:2px; padding:2px 4px 2px 4px;}

.mleft5{margin-left:5px;}
.dvleft{float:left;}

.txtbx2{padding:2px;font-size:11px; border:solid 1px #c4c4c4;outline:none;transition: all 0.25s ease-in-out; -webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;border-radius:2px;
-webkit-border-radius:2px;-moz-border-radius:2px; box-shadow:0 1px 6px rgba(0,0,0,.1) inset;-webkit-box-shadow:0 1px 6px rgba(0,0,0,.1) inset;-moz-box-shadow:0 1px 6px rgba(0,0,0,.1) inset}

a{text-decoration:none;color:#23699a;outline:none; cursor:pointer;}a:hover{text-decoration:underline;}


<span class="dvleft mleft5">
<input class="txtbx2" type="text" value="test value here" style="width: 280px" >
</span>
<a class="smalCopybtn" style="margin-left:-2px; margin-top:2px;">
<span style="padding-left:1px;">Copy</span>
</a>

Answer 1

Remove margin-top:2px; on your anchor link

Live Demo

——

You write this

<a class="smalCopybtn" style="margin-left:-2px; margin-top:2px;">

Remove margin-top:2px;

———–

or add this

.txtbx2{
vertical-align:top;
}

Updated demo