반응형
inline 요소 중 하나인 span 태그를 생성하고 hello라는 text를 넣어주었다. 그리고 background-color를 darkseagreen으로 설정한 결과 다음과 같은 화면이 출력되었다.
padding 속성
해당 span 태그에 padding 속성으로 20px의 값을 주었을 땐 어떻게 동작할까?
<head>
<style>
body {
margin: 20px;
}
span {
background-color: darkseagreen;
padding: 20px;
margin: 30px;
}
</style>
</head>
<body>
<span>hello</span>
<span>hello</span>
</body>
inline 요소의 경우 padding은 위, 아래, 왼쪽, 오른쪽 모두 잘 적용된다. 이미지에서 보이듯 hello 라는 문구 주변으로 동일한 px의 공백이 생기는 모습을 볼 수 있다.
margin 속성
이번에는 동일한 span 태그에 margin 속성을 부여해보겠다.
<head>
<style>
body {
margin: 20px;
}
span {
background-color: darkseagreen;
padding: 20px;
margin: 30px; /* margin 속성 추가 */
}
</style>
</head>
<body>
<span>hello</span>
<span>hello</span>
</body>
뭔가 예상과 많이 다른 모습이다. 공백이 왼쪽과 오른쪽에만 적용되고 위아래에는 적용되지 않았다. 이유는 바로 span이 inline요소이기 때문이다. inline 요소는 margin을 왼쪽 오른쪽에만 가질 수 있다. 만약 위쪽과 아래쪽에 margin을 주고 싶다면 inline으로 적용된 요소를 block으로 변경해야 한다.
이렇듯 inline 요소의 경우 특정 속성이 일정 부분은 적용되고 나머지는 적용이 안되는 등의 특징이 있다. 이를 잘 알고 활용한다면 더욱 좋은 개발을 할 수 있을 것이다.
반응형
'TIL > CSS' 카테고리의 다른 글
| inline-block의 사용과 문제점 (0) | 2023.07.28 |
|---|---|
| 모든 태그에 css 속성을 적용하는 방법 (0) | 2023.07.24 |
| border와 border-style (0) | 2023.07.23 |
| padding의 개념과 id로html에 css 주입하는 방법 (0) | 2023.07.22 |
| margin 속성 사용법과 collapsing margins 현상 (0) | 2023.07.21 |
| display속성으로 block, inline 제어 (0) | 2023.07.20 |
| css 개념 정리 (0) | 2023.07.19 |
| css를 html에 적용하는 방법 (0) | 2023.07.12 |
댓글