CSS Box & Position[border,padding,margin,position]

CSS Box & Position[border,padding,margin,position]

관련글

• CSS Position attribute[static, relative, absolute, fixed]
• CSS2 Z-index attribute[auto, number, initial]

hello CSS

1. 박스 관련 속성

   구분	속성	설명	속성값
   박스 테두리	border-width	굵기	수치, thin, medium, thick
   	border-color	색상	색상명, RGB혼합비, 시스템 색
   	border-style	스타일	none, hidden, dotted, dashed, solid, double, groove, ridge, outset, inset
   	border	일괄 지정	각 속성의 값을 나열
   박스 테두리와 외부 다른 요소와의 간격	margin	일괄 지정	수치, %
   	margin-top, margin-right, margin-bottom, margin-left	상, 우, 하, 좌의 각 방향에 대한 속성	수치, %
   박스 테두리와 박스 안의 내용 사이의 간격	padding	일괄 지정	수치, %
   	padding-top, padding-right, padding-bottom, padding-left	상, 우, 하, 좌의 각 방향에 대한 속성	수치, %

JS Bin

      .item1
  {
  width:200px;
  height:100px;
  border-color:blue red green pink;
  border-style:solid dotted dashed hidden;
  border-width:1px 3px 5px 10px;
  background-color:aqua;
      }
      

    큰 박스#######
     .div
  {
  width:100%;
  height:300px;
  border:1px solid blue;
  padding:20px 50px;
  margin:10px 5px;
  }
    

        .item2
  {
  width:100px;
  height:100px;
  border-color:blue red green pink;
  border-style:solid dotted dashed hidden;
  border-width:1px 3px;
  background-color:aqua;
  position:absolute; top:170px;left:300px;
    
      }