margin-top: 5px !important;
 margin-right: -10px !important;
 margin-left: 0px !important;

Fx 63.0.3 in Linux. I added a tab close button (hovered) colored background. It's not necessarily same W x H as the inactive button transparent background - which is fine. I'd like to move the (inactive) 'X' close to the tab right end (did move it - not necessarily easiest way). The bottom of red background in hovered state needs to be close to the tab bottom & even with the tab's right end / side, for a better, easier target to close. I did that - more or less. :) The issue (that may have no solution) is the inactive button's transparent BG is 20x20px, I believe. So far, unless I make the hovered, colored background the same size as the inactive button's , it distorts the 'X' when the red background appears. So the button is semi-fixed? When hovered, it doesn't "translate" the X icon in the same HxW. Yes, people are starving in Africa & we're worried about pretty browsers. I assume because the inactive close button has different dimensions and margins than the added background does, the only way I can get the "legs" of the 'X' near the tab border is enter different margins for it than for the hovered, colored background? * Question on the last part: *When you have a 20x20 button, originally positioned so the 'letter X' was ~ 5 - 7px from the border / end, what does Firefox "do" w/ the transparent part of the button, when you enter margins so the 'X' is very near the right tab border (right end of the moz-box or container)? * Does it in effect, 'remove' part of the transparent button, as different margins are entered, to move the button closer & closer to the container's end? It appears the default close button's 'X' is 10px WxH. Since browser toolbox showed the button was 20x20px - I think, then it has a 5px margin? on all sides of the 'X' image. The main goals are: * 1. Get more room for text on tabs. I also changed margins on the tab icons to move them near the tab left border & disabled tab text fadein. * 2. Have a clickable background to close tabs - that lines up at the tab bottom, right corner & not have to "fish around" for the close button. I have that. So far, unless I make the hovered background the exact dimensions of the button, then use the exact margins on both, it will distort the X - depending on how different in size the inactive & hovered sizes are. I couldn't find a CSS property / feature that would allow *the original* X close button to shift up or left (undistorted), when the hovered background appears. Maybe the original close button could be hidden during hover and a new close button specified (adding a colored BG) with a new size? Say, 15x20 (or 30)? As long as the hovered BG is near the bottom, right corner. * I think whatever space is occupied by the width of the transparent button edge (plus padding, if any), dictates how far the tab's text can extend to the right? Once hovered, I don't care if more or less text shows, since I'll be closing the tab, not reading it. * If that's true, I could modify / create an overall smaller inactive close button - allowing more text on tabs. Or just "remove" the *inactive state* close button, & specify the same close button (plus red BG) for the hovered state. I'm not sure how hard it would be. It was kind of tedious, figuring out how much negative margin values to enter (for 2 different element sizes), so they both wound up (nearly) equidistant from the tab R end. Key word being "nearly". I didn't want the 'X' touching or almost - the tab divider line. But I want the hovered background touching it, to make an easier closing target. In blown up screenshot(sss), it seemed if I measured the distance between the close button visible 'X' and the tab's R border (say 7px), if I entered 5px, the visible 'X' moved, but NOT so it was 2px from the R border. It seemed something else was affecting it. .tabbrowser-tab .tab-close-button { /* move inactive close button closer to tab R-end */ margin-top: 5px !important; margin-right: -10px !important; margin-left: 0px !important; }

/ * Tabs remove fadein text effect, move icons nearer tab border; hide un-hovered close buttons.  Show close buttons only when hovering selected or unselected tabs. */


.tab-label-container[textoverflow]:not([pinned]){
     mask-image: none !important;  
    align-content: center !important; }

.tab-label {
	-moz-box-flex: 1 !important;
	text-align: center !important; } 
 /* Centers tab text if < text box width */

.tab-text {
	margin: 0 !important;
       padding: 0 !important; }

/* reduce margin betwn tab icons & tabs L border; more text space. */
.tabbrowser-tab .tab-icon-image {  
    margin: 0px 0px 0px -7px !important; } 
/* margin or padding format: npx npx npx npx are in order: top-margin right-mar bottom-mar left-mar.  Or use individual properties: margin-right: 0px; etc.  Adjust margins to suit taste */

/* Reducing size of HIDDEN close button allows more room for tabs' text. Adjust to suit. */ 
.tabbrowser-tab:not([pinned="true"]) .tab-close-button {
	visibility: hidden !important;
	width: 1px !important;
	height: 1px !important;
	margin-right: -6px !important;  
	margin-bottom: 0px !important; } 
 
/* negative margins needed - move hidden button border close to tab border */

.tabbrowser-tab[selected="true"] .tab-close-button {
	visibility: hidden !important;
	width: 1px !important;
	height: 1px !important;
	margin-right: -6px !important; 
	margin-bottom: 0px !important; }

.tabbrowser-tab:hover .tab-close-button {  
	-moz-appearance: none !important;
	visibility: visible !important;
	background: #F90000 !important;  
/** make close button background any color, or use gradients or images. **/
       width: 20px !important;  
/** change hovered close button background size to taste. **/
      height: 20px !important;
      margin-right: -10px !important;
      margin-bottom: -10px !important; }