margin2 inline 요소에서의 padding과 margin inline 요소 중 하나인 span 태그를 생성하고 hello라는 text를 넣어주었다. 그리고 background-color를 darkseagreen으로 설정한 결과 다음과 같은 화면이 출력되었다. padding 속성 해당 span 태그에 padding 속성으로 20px의 값을 주었을 땐 어떻게 동작할까? hello hello inline 요소의 경우 padding은 위, 아래, 왼쪽, 오른쪽 모두 잘 적용된다. 이미지에서 보이듯 hello 라는 문구 주변으로 동일한 px의 공백이 생기는 모습을 볼 수 있다. margin 속성 이번에는 동일한 span 태그에 margin 속성을 부여해보겠다. hello hello 뭔가 예상과 많이 다른 모습이다. 공백이 왼쪽과 오른쪽에만 적용되고 위아래에는 적용되지 .. 2023. 7. 25. margin 속성 사용법과 collapsing margins 현상 margin 속성 사용법 위의 코드로 html 문서를 작성하고 웹 브라우저를 통해 실행하면 body 태그에 웹 브라우저에 추가한 css가 보인다. 사용자 에이전트 스타일시트라는 부분이 바로 내가 입력한 것이 아니라 웹 브라우저에서 html 파일을 실행할 때 스스로 추가하는 css이다. 여기서 보면 margin 이라는 속성이 8px이라는 값을 가진것으로 나온다. 이것이 실행되어 보이는 화면이 바로 아래의 이미지이다. 이미지를 보면 위쪽과 왼쪽에 일정부분의 공백이 있고 흰색의 div 영역이 있는것을 볼 수 있다. 이것이 바로 margin이 적용되었기 때문에 나타나는 현상이다. 여기서 margin은 block 요소가 가지는 속성 중 하나로 block 요소의 경계 바깥의 공간을 의미한다. margin의 값을 0.. 2023. 7. 21. 이전 1 다음
