padding2 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. padding의 개념과 id로html에 css 주입하는 방법 padding의 개념 padding은 margin과는 반대 개념이다. 2023.07.29 - [TIL/CSS] - margin 속성 사용법과 collapsing amrgins 현상 margin이 경계의 바깥 부분을 의미했다면 padding은 경계의 안쪽 부분을 의미한다. html { background-color: blueviolet; } body { background-color: aqua; margin: 0; } div { height: 150px; width: 150px; background-color: white; } body 태그의 margin 속성에 0이라는 값을 주었을 때의 모습이다. 위쪽, 오른쪽, 왼쪽이 모두 html 경계와 맞닿아있다. 이 때 body 태그에 padding 속성을 주면 .. 2023. 7. 22. 이전 1 다음
