[퍼블] html 박스를 디자인 하기 위한 CSS-1(padding)

html 박스를 디자인하기 위하서는 4가지 CSS 옵션이 필요합니다.

1. width : 넓이
2. height: 박스의 높이
3. padding : 텍스트와 border 사이(내부여백)
   • ex) value값 넣는 방법
     • 10px -> 상하좌우 모든 값 적용
     • 10px 20px -> 첫 번째 값은 상하, 두 번째 값은 좌우
     • 10px 20px 30px 40px -> 상 우 하 좌
4. margin :  border와 윗부분(외부여백)

 

실습)

padding에 value 값을 하나만 줬을 경우

.box{
    border: 1px solid red;
    width: 50px;
    height: 50px;
    padding: 10px;
    text-align: center;
}

padding에 value 값을 두개 줬을 경우

.box{
    border: 10px solid red;
    width: 100px;
    height: 100px;
    padding: 25px 10px;
    text-align: center;
    font-size: 50px;
}

padding에 value 값을 모두 줬을 경우

.box{
    border: 10px solid red;
    width: 100px;
    height: 100px;
    padding: 25px 10px 30px 35px;
    text-align: center;
    font-size: 50px;
}