Properties

Properties

Animations
- animation
- animation-delay
- animation-direction
- animation-duration
- animation-fill-mode
- animation-iteration-count
- animation-name
- animation-play-state
- animation-timing-function
Backgrounds
- background
- background-attachment
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-repeat
- background-size
Borders
- border
- border-bottom
- border-bottom-color
- border-bottom-left-radius
- border-bottom-right-radius
- border-bottom-style
- border-bottom-width
- border-color
- border-image
- border-image-outset
- border-image-repeat
- border-image-slice
- border-image-source
- border-image-width
- border-left
- border-left-color
- border-left-style
- border-left-width
- border-radius
- border-right
- border-right-color
- border-right-style
- border-right-width
- border-style
- border-top
- border-top-color
- border-top-left-radius
- border-top-right-radius
- border-top-style
- border-top-width
- border-width
- box-shadow
Box Alignment
- align-content
- align-items
- align-self
- column-gap
- gap
- justify-content
- justify-items
- justify-self
- place-content
- place-items
- place-self
- row-gap
Box Model
- margin
- margin-bottom
- margin-left
- margin-right
- margin-top
- padding
- padding-bottom
- padding-left
- padding-right
- padding-top
Box Sizing
- box-sizing
- height
- max-height
- max-width
- min-height
- min-width
- width
Color
- color
- opacity
Compositing and Blending
- background-blend-mode
- isolation
- mix-blend-mode
Containment
- contain
- container-name
- container-type
- content-visibility
CSS2 and earlier
- border-collapse
- border-spacing
- empty-cells
- table-layout
- z-index
Custom Properties and Values
- --*
- all
Display
- display
- order
- visibility
Filter Effects
- backdrop-filter
- filter
Flexible Box Layout
- flex
- flex-basis
- flex-direction
- flex-flow
- flex-grow
- flex-shrink
- flex-wrap
Fonts
- font
- font-family
- font-feature-settings
- font-kerning
- font-language-override
- font-optical-sizing
- font-palette
- font-size
- font-stretch
- font-style
- font-variant
- font-variant-alternates
- font-variant-caps
- font-variant-east-asian
- font-variant-ligatures
- font-variant-numeric
- font-variant-position
- font-variation-settings
- font-weight
Fragmentation
- box-decoration-break
- break-after
- break-before
- break-inside
Generated Content
- content
- quotes
Grid Layout
- grid
- grid-area
- grid-auto-columns
- grid-auto-flow
- grid-auto-rows
- grid-column
- grid-column-end
- grid-column-start
- grid-row
- grid-row-end
- grid-row-start
- grid-template
- grid-template-areas
- grid-template-columns
- grid-template-rows
Images
- image-orientation
- image-rendering
- object-fit
- object-position
Inline Layout
- line-height
- vertical-align
Lists and Counters
- counter-increment
- counter-reset
- list-style
- list-style-image
- list-style-position
- list-style-type
Logical Properties and Values
- block-size
- border-block
- border-block-color
- border-block-end
- border-block-end-color
- border-block-end-style
- border-block-end-width
- border-block-start
- border-block-start-color
- border-block-start-style
- border-block-start-width
- border-block-style
- border-block-width
- border-end-end-radius
- border-end-start-radius
- border-inline
- border-inline-color
- border-inline-end
- border-inline-end-color
- border-inline-end-style
- border-inline-end-width
- border-inline-start
- border-inline-start-color
- border-inline-start-style
- border-inline-start-width
- border-inline-style
- border-inline-width
- border-start-end-redius
- border-start-start-radius
- caption-side
- clear
- float
- inline-size
- inset
- inset-block
- inset-block-end
- inset-block-start
- inset-inline
- inset-inline-end
- inset-inline-start
- margin-block
- margin-block-end
- margin-block-start
- margin-inline
- margin-inline-end
- margin-inline-start
- max-block-size
- max-inline-size
- min-block-size
- min-inline-size
- padding-block
- padding-block-end
- padding-block-start
- padding-inline
- padding-inline-end
- padding-inline-start
Masking
- clip
- clip-path
- mask
- mask-border
- mask-border-mode
- mask-border-outset
- mask-border-repeat
- mask-border-slice
- mask-border-source
- mask-border-width
- mask-clip
- mask-composite
- mask-image
- mask-mode
- mask-origin
- mask-position
- mask-repeat
- mask-size
- mask-type
Motion Path
- offset
- offset-anchor
- offset-distance
- offset-path
- offset-position
- offset-rotate
Multi column Layout
- column-count
- column-fill
- column-gap
- column-rule
- column-rule-color
- column-rule-style
- column-rule-width
- column-span
- column-width
- columns
Overflow
- overflow
- overflow-clip-margin
- overflow-x
- overflow-y
- scroll-behavior
- scrollbar-gutter
- text-overflow
Paged Media
- page
Positioned Layout
- bottom
- inset-block-end
- inset-block-start
- inset-inline-end
- inset-inline-start
- left
- position
- right
- top
Rendering
- will-change
Shapes
- shape-image-threshold
- shape-margin
- shape-outside
Text
- hyphens
- letter-spacing
- tab-size
- text-align
- text-align-all
- text-align-last
- text-indent
- text-justify
- text-transform
- white-space
- word-break
- word-spacing
Text Decoration
- text-decoration
- text-decoration-color
- text-decoration-line
- text-decoration-style
- text-shadow
Transforms
- backface-visibility
- perspective
- perspective-origin
- rotate
- scale
- transform
- transform-box
- transform-origin
- transform-style
- translate
Transitions
- transition
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
User Interface
- caret-color
- cursor
- outline
- outline-color
- outline-offset
- outline-style
- outline-width
- resize
- user-select
Writing Modes
- direction
- text-combine-upright
- text-orientation
- unicode-bidi
- writing-mode

account_tree
bug_report

Box Model

CSS 박스 안팎으로 여백과 간격을 정의한다.

개요

박스가 배치되면서 박스 내외부의 공간 조정에 대한 기술적인 내용을 주제로 한다. 특이할 점은 CSS 2에서는 물리적인 방향만을 지원했으나 CSS Logical Properties and Values Module이 새롭게 등장하면서 논리적인 방향을 다루는 속성들도 추가되었다. 논리적인 방향으로 박스 내외부의 공간 조정이 필요한 경우에는 Logical Properties and Values 분류를 확인하기 바란다.

관련 속성

margin
요소의 주변 요소와의 상하좌우 간격을 설정한다.
margin-bottom
요소의 하단 주변 요소와 간격을 설정한다.
margin-left
요소의 왼쪽 주변 요소와 간격을 설정한다.
margin-right
요소의 오른쪽 주변 요소와 간격을 설정한다.
margin-top
요소의 상단 주변 요소와 간격을 설정한다.
padding
요소의 상하좌우 내부 여백을 설정한다.
padding-bottom
요소의 하단 내부 여백을 설정한다.
padding-left
요소의 왼쪽 내부 여백을 설정한다.
padding-right
요소의 오른쪽 내부 여백을 설정한다.
padding-top
요소의 상단 내부 여백을 설정한다.

W3C Modules

CSS Box Model Module Level 3

©2024 devdic.com, Korea

출처를 밝힌 리소스 이외의 본 레퍼런스에 사용된 모든 생성물의 소유 및 저작권은 devdic.com에 있습니다. 특별히 재배포를 금지한 것 이외는 재배포가 가능하며 반드시 출처를 표기해 주시기 바랍니다.
현재는 베타 버전으로 미등록 및 불완전한 콘텐츠가 일부 있을 수 있습니다. 오류 및 기술 자료 제보(건의)는 언제든지 환영하며 감사드립니다.
기본적으로 W3C 기술 사양을 기준으로 작성하였으며 일반적이지 않은 기술 설명에 대한 내용의 일부는 Mozilla의 MDN web docs에서 도움 받았음을 밝힙니다. 그들을 존경합니다.

master@cydemy.com