CSS #3 박스 모델

<style>

h1{

border-width:5px;

border-color:red;

border-style: solid;

}

</style>

​

h1과 같은 태그는 화면 전체를 사용, block element.

a와 같은 태그는 자신의 크기만큼을 사용, inline element.

​

h1에 display:inline를 추가하면 자신의 크기만큼만 사용하도록 만들 수 있다.

a에 display:block을 추가하면 화면 전체를 사용하도록 만들 수 있다.

​

display:none은 태그 내용을 감춘다.

​

h1, a{

...

}

여기에서 ','를 사용해서 선택자 여러 개를 동시에 사용할 수 있다.

또한

h1{

border-width:5px;

border-color:red;

border-style: solid;

}

대신

h1{

border:5px solid red;

}

로 단축이 가능하다.

​

컨텐츠와 박스 사이의 여백

padding: 20px;

박스와 박스 사이의 여백

margin:0;

​

width : 100px

height : 100px