style border를 지정한 css layer에게 line-height를 지정시 nn4에서 좌표가 정확히 일치하지 않습니다. border를 지정하지 않고 line-height를 지정하면 문제가 없습니다. 반대로 border를 지정해도 line-height를 지정하지 않으면 좌표는 정확합니다.

즉, border style을 지정한 레이어에게 line-height를 지정시, border 윗부분이 margin-top을 지정한 것처럼 top에 지정한 좌표에 위치하지 않을 수 있습니다. left는 맞습니다.

#borderPos {
	position:absolute; left:0px; top:0px; width:30x;
	border-style:outset; border-width:5px; border-color:red;
}

실행하기

#borderPos {
	position:absolute; left:0px; top:0px; width:30x; line-height:20px;
	border-style:outset; border-width:5px; border-color:red;
}

실행하기

#borderPos {
	position:absolute;left:0px;top:0px;width:30x; line-height:20px;
	background-color:aqua;layer-background-color:aqua;
	border-style:outset; border-width:5px; border-color:red;
}

실행하기

눌려진 값 = (line-height값) - (border-width값 * 2 + 6)

지난번에는 font-size를 지정하지 않고 border-width, line-height 두개만 지정하여 작동하는 것을 보고 잘못된 내용을 올렸습니다. border를 주어도 line-height를 작게 지정하면 border가 눌려지지 않고 정상적으로 left, top 의 좌표에 나와서 위의 빨간 상자의 잘못된 내용을 올렸습니다.

body { font-size: 12pt; }

여기서 line-height가 font-size 보다 크다면 큰만큼 border가 눌려집니다. font-size:15px; 까지에서 line-height가 font-size 보다 같거나 크면 border가 그 만큼 눌려집니다. 같으면 1px이 1px가 크면 2px 만큼 border가 눌려집니다. 그리고 font-size:16px 부터는 같으면 눌려지지 않고 큰만큼 만 눌려집니다. font-size:16px; 에서 line-height:17px 라면 1px가 눌려집니다.

단위 pt도 비슷한 결과가 나오는데 pt는 무조건 1pt 크면 1px 씩 눌려집니다. 1pt 씩 눌려지는 게 아니고 1px 씩 눌려집니다.

body 나 택 자신에게 font-size를 지정하지 않았다면 사용자의 브라우저에 지정한 글꼴 크기로 택을 출력합니다. 그래서 위의 3개의 "실행하기" 예제는 자신의 브라우저에 지정한 글자 크기에 따라서 brder가 눌려진 크기가 다를 수 있습니다.

body { font-size: 16px; }

#borderPos {
	position:absolute; left:0px; top:0px; width:30x; 
	line-height:20px;
	border-style:outset; border-width:5px; border-color:red;
}

<div id=borderPos>...</div>

실행하기

<div id=borderPos> 에 지정한 font-size 가 없으므로 body 에 지정한 font-size를 상속받습니다. 그래서 16px가 됩니다. font-size:16px 보다 line-height:20px 로 4px 더 큽니다. 그래서 4px 만큼 border 가 눌려졌습니다.

body { font-size: 16px; }

#borderPos {
	position:absolute; left:0px; top:0px; width:30x; 
	line-height:20px; font-size:20px; 
	border-style:outset; border-width:5px; border-color:red;
}

<div id=borderPos>...</div>

실행하기

<div id=borderPos> 에 font-size:20px; 를 지정하여서 line-height:20px; 를 같이 넣어주어도 눌려지지 않고 border는 top:0px 에 있습니다.

이런 border를 지정한 레이어에 line-height를 주고 정확한 위치에 배치하기 위해서는 이런 결과를 알아야 합니다. 이 문제를 해결하는 방법은 table을 사용하는 것입니다. line-height를 지정할 내용물을 table 택의 <TD></TD>택 안에 넣고 <TD>택에 line-height를 지정하면 이 문제를 피할 수 있습니다.

#borderPos {
	position:absolute;left:0px;top:0px;width:30px;
	border-style:outset; border-width:5px; border-color:red;
}

<div id=borderPos>
	<table><tr><td style="line-height:20px;">
	20px로 줄간격을 둠. 20px로 줄간격을 둠. 
	20px로 줄간격을 둠. 20px로 줄간격을 둠. 
	</td></tr></table>
</div>

실행하기

이때, 최후의 선택이 table입니다.