English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

CSS 참조 설명서

CSS @규칙(RULES)

CSS 속성 전체

CSS width 속성 사용 방법 및 예제

width CSS 속성이 지정된 요소의 내용 영역의 너비를 지정합니다. 이 내용은 채우기, 경계선 또는 여백을 포함하지 않습니다. 참조:CSS 상자 모델

아래 표는 이 속성의 사용 설명 및 버전 이력, 이 속성이 자바스크립트 스크립트에서 사용하는 문법을 나타냅니다.

기본 값:auto
적용 대상:대체되지 않은 내장 요소, 테이블 행 및 행 그룹을 제외한 모든 요소
thừa kế:아니요
애니메이션 가능:네.참조: 애니메이션 속성
버전:CSS 1,2,3
JavaScript 문법:object.style.width="280px"

width 사용 문법

이 속성의 문법은 다음과 같습니다:

width: length | percentage | auto | initial | inherit

아래 예제는 width 속성을 사용하는 방법을 보여줍니다.

  p {
   width: 300px;
   background-color: #f0e68c;
  }
테스트를 보세요‹/›

속성 값

아래 표는 이 속성의 값을 설명합니다.

설명
length너비를 길이 값으로 지정합니다. px, pt, cm, em 등의 단위를 사용합니다. 음수 길이 값을 사용하지 않습니다.
percentage백분율로 너비를 지정합니다. 요소의 포함 블록의 너비에 비례합니다. 음수 백분율 값을 사용하지 않습니다.
auto브라우저는 다른 속성의 값을 기반으로 지정된 요소의 너비를 계산합니다. 이는 기본 값입니다.
initial이 속성을 기본 값으로 설정합니다.
inherit지정된 경우, 관련 요소는 부모 요소의 width 속성 값을 사용합니다.

브라우저 호환성

width 속성의 브라우저 호환성, 아래 표의 숫자는 이 속성을 지원하는 브라우저의 최소 버전 번호를 나타냅니다; 모든 주요 브라우저는 이 속성을 지원합니다。

  • 파이어폭스 1+

  • Google 크롬1+

  • 인터넷 익스플로러 4+

  • Apple 사파리 1+

  • 오페라 4+

더 읽어보기

다음 내용에 대한 튜토리얼을 참조하십시오:CSS Box 모델CSS 크기

관련 속성:max-widthmin-width