소스

* margin / padding / border

현재 소스에서 body 에 마진을 50px 만큼 준것을 표현한 그림이다.

보더에 색을 주고 스타일로 solid를 설정하여 실선으로 표현됨을 알수있다. width에 10px만큼의 두께를 설정한다.

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        body{
            margin: 50px;
        }
        h1{
            background-color: red;
            height: 50px;
            /*  width: 200px; 사이즈가 줄은 것 같이 보여도 한 블록을 차지하는건 이전과 동일하다. */
            margin: 0px;
            padding: 0px;
            /* 바디에 마진이 존재한다. */
        }
        p{
            background-color: orange;
            border-color: lightseagreen;
            border-width: 10px; /* 개발자도구의 border과 동일하다. 마진은 위랑 아래랑 그 갭 */
            border-style: solid;
            margin: 0px;
        }
        div{
            background-color: fuchsia; /* 아래에서 오버라이드 되어 적용이 안됨*/
        }
        
        #box1{
            background-color: #0000ff; /* 색깔이 조금씩 더 어둡게 색상 설정 */
            color: white;
        }
        #box2{
            background-color: #0000aa; 
            color: white;
        }
        #box3{
            background-color: #000099;
            color: white;
        }
        #box4{
            background-color: #000055;
            color: white;
        }
        /* 패딩은 텍스트와 보더 전까지의 살짝있는 공간 */
    </style>
</head>
 
<body>
    <h1>head1</h1>
    <h1>head2</h1>
    
    <p>aaaaaaaaaaaaaa</p>
    <p>bbbbbbbbbbbbbb</p>
    
    <div id='box1'>1</div>
    <div id='box2'>2</div>
    <div id='box3'>3</div>
    <div id='box4'>4</div>  
        
</body>
</html>
cs

* 마진 표현  margin: 0px 0px 0px 0px;  이러한 방식으로도 가능 (위 오른 아래 왼  순서)

결과


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

'* Programming > HTML&CSS' 카테고리의 다른 글

[HTML/CSS] 지시자 우선순위  (0) 2016.09.22
[HTML/CSS] 이미지 넣기  (0) 2016.09.22
[HTML/CSS] 블럭/인라인 블럭의 차이와 설정 오버라이드  (0) 2016.09.22
[HTML/CSS] 마우스 올렸을 경우,클릭하고있는 경우,클릭 후  (0) 2016.09.22
[HTML/CSS] HTML에 CSS를 적용하는 방법 3가지  (0) 2016.09.20

+ Recent posts

티스토리툴바