CODEWITHSUNDEEP
htmlcss
user7461846
user7461846

Reputation:

unwanted margin on absolutely positioned element

Why btnow has some top margin?

Its css is top:0.

.btnowwrap{
	position:relative;
	height:20px;
	background:gold;
}

.btnow{
	position:absolute;
	right:9px;
	top:0;
	cursor:pointer;
	font-size:19px;
	color:#777;
}
<div class='btnowwrap'>
<div class='btnow' id='btnow' title='SADA'>&#x267B;</div>
</div>

Upvotes: 0

Views: 48

Answers (3)

Rokan Nashp
Rokan Nashp

Reputation: 351

If you dont want to reduce font size then use

.btnow { line-height: 100% }

it will fit. You can reduce font size too but line-height is the best solution.

Upvotes: 0

לבני מלכה
לבני מלכה

Reputation: 16251

The icon is in top:0 this space is because the height of icon(see image):

enter image description here

Use line-height: 1em; 

.btnowwrap{
	position:relative;
	height:20px;
	background:gold;
}

.btnow{
	position:absolute;
	right:9px;
	top:0;
	cursor:pointer;
	font-size:19px;
	color:#777;
line-height: 1em;
}
<div class='btnowwrap'>
<div class='btnow' id='btnow' title='SADA'>&#x267B;</div>
</div>

Upvotes: 0

Hiren Vaghasiya
Hiren Vaghasiya

Reputation: 5544

Apply line-height:100%;

.btnowwrap{
	position:relative;
	height:20px;
	background:gold;
}

.btnow{
	position:absolute;
	right:9px;
	top:0;
	cursor:pointer;
	font-size:19px;
	color:#777;
  line-height: 100%;
}
<div class='btnowwrap'>
<div class='btnow' id='btnow' title='SADA'>&#x267B;</div>
</div>

Upvotes: 3

Related Questions