마진

저번에 봤듯이 요소와 요소사이의 거리를 뜻합니다.


margin태그

종류 

설명 

margin 

보통 편하게 사용하는 margin태그이며 값의 개수에따라 

상하좌우의 설정 값이 달라집니다. 

margin-top 

요소위의 마진을 뜻합니다. 

margin-right

요소 오른쪽의 마진을 뜻합니다. 

margin-bottom 

요소 밑의 마진을 뜻합니다.

margin-left 

요소 왼쪽의 마진을 뜻합니다. 


※margin의 값의 개수:1개이면 상하좌우 모두 하나의 값이고 값이 2개라면 위아래가 첫번째 값이고 두번째 값이 좌우입니다.

값이 세개일경우 첫번째값-위마진 두번째값-좌우마진 세번째값-밑의마진을 뜻하고 네개라면 그냥 시계방향으로 

위->오른쪽->밑->왼쪽으로 차례로 사용하게 됩니다.


margin의 auto속성

margin의 위와 아래값을 설정하고 좌우 마진값을 auto로 하는 것입니다.

ex)margin:10 auto 20 auto;

이렇게 하시면 위-10 아래-20 좌우는 브라우저 전체에서 요소값을 빼고 /2한 값이 됩니다. 

그러면 중앙으로 자동으로 정렬되게 됩니다.


소스코드↓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!doctype html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>html문서</title>
    </head>
    <style>
        #margin1{
            margin-top:5px;
            margin-right:10px;
            margin-left:15px;
            margin-bottom:20px;
            border-style:solid;
            width:200px;
            height:300px;
        }
        #margin2{
            border-style:solid;
            width:200px;
            height:300px;
            margin:auto 0 auto 0;
        }
   </style>
    <body>
        <div id="margin1" style="display:inline-block"></div>
        <div id="margin1" style="display:inline-block"></div>
        <br>
        <div id="margin1" style="display:inline-block"></div>
        <div id="margin1" style="display:inline-block"></div>
        <div id="margin2"></div>
    </body>
</html>
cs

패딩

요소와 요소의 테두리까지의 거리를 말합니다.


종류 

설명 

padding 

그냥 상하좌우 모든 패딩을 뜻합니다.

padding-top

위의 패딩을 뜻합니다. 

padding-right 

오른쪽의 패딩을 뜻합니다. 

padding-bottom 

밑의 패딩을 뜻합니다. 

padding-left 

왼쪽의 패딩을 뜻합니다. 

padding의 값의 개수에 따라 달라지는 것은 마진과 같습니다.


소스코드↓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!doctype html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>html문서</title>
    </head>
    <style>
        .padding{
            padding-top:5px;
            padding-right:10px;
            padding-left:10px;
            padding-bottom:5px;
            /*padding:5px 10px, padding 5px 10px 5px와동일*/
            width:300px;
            height:auto;
            border-style:dashed;
            color:red;
        }
   </style>
    <body>
        <div class="padding">Hello World!</div>
    </body>
</html>
cs


여기까지 포스팅을 마치도록 하겠습니다.

저작자표시 비영리 변경금지

'HTML' 카테고리의 다른 글

표 관련 스타일  (0) 2018.01.23
위치관련 속성  (0) 2018.01.16
박스모델과 테두리 관련 스타일  (0) 2018.01.10
그라데이션 효과 만들기  (0) 2018.01.08
색상과 배경 스타일  (0) 2018.01.07

+ Recent posts

티스토리툴바