display

엘리먼트의 랜더링 모델을 지정하는 속성

Text 링크를 버튼처럼 사용하기

Text링크는 width나 height등으로 크기 조절이 자유롭지 않다. inline 으로 구현되는 anchor element 를 block 으로 바꾸어 주면 이를 간단히 CSS로 구현 할 수 있다.

a {
	display: block;
	width: 7em;
	height: 1.5em;
}

이렇게 block으로 크기를 자유롭게 조절 할 수 있으면 <a> 태그 만으로 버튼을 자유롭게 만들 수 있고 :hover를 같이 마우스 이벤트를 이용한 스타일도 javascript를 사용하지 않고 쉽게 구현 할 수 있다.

IE에서 display: block을 사용할 경우 리스트 하단의 여백 없애는 방법

IE에서 리스트 안의 링크 태그에 display: block을 적용하면 리스트 태그 하단에 의도하지 않은 여백이 생기는 것을 볼 수 있다. 이 경우, IE 전용 속성인 inline-block을 적용하고 vertical-align 을 조절하면line-height 속성을 이용하여 여백을 없앨 수 있다.

#navlist li {
	list-style: none;
	border-top: 1px solid gray;
	text-align: left;
	margin: 0px;
	padding: 0px;
	line-height:0;
}
#navlist li a {
	display: block;
	padding: 3px;
	margin-bottom: 0px;
	border-left: 12px solid #2C2;
	background: #EEE;
	text-decoration: none;
	line-height:1;
}

display: inline-block을 이용하는 방법이 적절하지 않아서 line-height 속성을 이용하는 방법으로 교체. 이영주님 감사합니다...