CSS bottom 속성
- 이전 페이지 border-width
- 다음 페이지 box-decoration-break
정의와 사용법
bottom 속성은 요소의 하단 경계를 정의합니다. 이 속성은 위치 요소의 외부 마argins의 하단 경계와 포함 블록의 하단 경계 간의 옆침을 정의합니다.
주의:"position" 속성의 값이 "static"이면, "bottom" 속성을 설정하여도 어떤 효과도 발생하지 않습니다.
설명
static 요소에 대해 auto, 길이 값에 대해 해당 절대 길이, 백분율 값에 대해 지정된 값, 그렇지 않으면 auto입니다.
상대적 정의 요소에 대해, bottom와 top이 모두 auto라면 계산 값은 모두 0입니다. 그 중 하나가 auto라면, 다른 값의 반대数值로 계산됩니다. 그리고 두 가지 모두가 auto가 아니라면, bottom는 top 값의 반대数值로 계산됩니다.
추가 참조:
CSS 강의:CSS 정렬
HTML DOM 참조 매뉴얼:bottom 속성
예제
이미지의 하단 경계를 포함 요소의 하단 경계 위에 5픽셀 높이의 위치로 설정합니다:
img { position:absolute; bottom:5px; }
CSS 문법
bottom: auto|length|initial|inherit;
속성 값
값 | 설명 |
---|---|
auto | 기본 값. 브라우저가 하단 위치를 계산합니다. |
% | 요소의 하단 위치를 포함 요소의 백분율로 설정합니다. 음수 값을 사용할 수 있습니다. |
length | px, cm 등의 단위로 요소의 하단 위치를 설정합니다. 음수 값을 사용할 수 있습니다. |
inherit | 부모 요소에서 bottom 속성 값을 继承 정의해야 합니다. |
기술 세부 사항
기본 값: | auto |
---|---|
thừa kế: | no |
버전: | CSS2 |
JavaScript 문법: | object.style.bottom="50px" |
추가 예제
- 픽셀 값으로 이미지의 하단 경계를 설정하는 방법
- 이 예제에서는 이미지의 하단 경계를 픽셀 값으로 설정하는 방법을 보여줍니다.
- 백분율로 이미지의 하단 경계를 설정하는 방법
- 이 예제에서는 이미지의 하단 경계를 백분율 값으로 설정하는 방법을 보여줍니다.
브라우저 지원
표에서의 숫자는 이 속성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.
크롬 | IE / 엣지 | 파이어폭스 | 사파리 | 오페라 |
---|---|---|---|---|
1.0 | 5.0 | 1.0 | 1.0 | 6.0 |
- 이전 페이지 border-width
- 다음 페이지 box-decoration-break