■ 마진과 패딩의 개념

마진: 여백, 여유

패딩: 속을 넣다, 채워 넣다

보더: 경계



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
 
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
 
    <style>
      p{
        background : blue;
        color:white;
      }
    </style>
 
  </head>
  <body>
    <p>
      welcom to 코딩 독학
    </p>
 
    <p>
      welcom to 코딩 독학
    </p>
 
 
  </body>
</html>
 
cs


결과


1
2
3
4
5
6
7
<style>
      p{
        background : blue;
        color:white;
        padding: 50px;
      }
</style>
c메s

padding 을 50px을 주면?

top, bottom, left, right가 50px가 들어 간다.


1
2
3
4
5
6
7
8
<style>
      p{
        background : blue;
        color:white;
        padding: 50px;
        margin: 50px;
      }
</style>
cs



요렇게 적용이 됩니다 :)



※참고

paddding : 0 10 20 30;

paddding : [상] [우] [좌] [하] ;

margin : [상] [우] [좌] [하] ;

저작자표시 비영리 동일조건

'HTML과 CSS' 카테고리의 다른 글

1.기본 설정  (0) 2019.05.02
[ html css] 기초 태그  (0) 2018.12.19
시맨틱 태그들  (0) 2018.11.26

+ Recent posts

티스토리툴바