테스트 사이트 - 개발 중인 베타 버전입니다

CSS Margins

· 8년 전 · 1985

CSS Margins

 

CSS 여백 속성은 요소 주위에 공간을 생성하는 데 사용됩니다.

 

여백 속성은 테두리 외부의 여백 크기를 설정합니다.

 

CSS를 사용하면 여백을 완벽하게 제어 할 수 있습니다. 요소의 각면 (위쪽, 오른쪽, 아래쪽 및 왼쪽)의 여백을 설정하는 CSS 속성이 있습니다.

 

Margin - Individual Sides

 

 

CSS에는 요소의 각면에 대한 여백을 지정하는 속성이 있습니다.

margin-top

margin-right

margin-bottom

margin-left

 

모든 margin 속성은 다음 값을 가질 수 있습니다.

 

auto - 브라우저가 여백을 계산합니다.

length - 여백을 px, pt, cm 등으로 지정합니다.

% - 포함하는 elemen 너비의 여백을 %로 지정합니다.t

inherit - 부모 요소에서 여백을 상속해야한다고 지정합니다.

 

팁 : 음수 값이 허용됩니다.

 

다음 예제에서는 <p> 요소의 네면에 대해 서로 다른 여백을 설정합니다.

 

p {

    margin-top: 100px;

    margin-bottom: 100px;

    margin-right: 150px;

    margin-left: 80px;

}

 

 

<!DOCTYPE html>

<html>

<head>

<style>

div {

    border: 1px solid black;

    margin-top: 100px;

    margin-bottom: 100px;

    margin-right: 150px;

    margin-left: 80px;

    background-color: lightblue;

}

</style>

</head>

<body>

 

<h2>Using individual margin properties</h2>

 

<div>This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px, and a left margin of 80px.</div>

 

</body>

</html>




댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
2254
2247
2244
2239
2225
2215
2214
2207
2198
2195
2192
2191
2190
2187
2186
2181
2180
2172
2170
2169
2166
2162
2158
2156
2152
2148
2145
2119
2112
2104