[HTML] Span Tag

Notice

Recent Posts

Recent Comments

Link

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

Tags more

Archives

Today

Total

관리 메뉴

🌱 → 🌳

[HTML] Span Tag 본문

Client/HTML CSS

[HTML] Span Tag

BAY 2022. 6. 21. 17:06

728x90

📌 질문 (오류 발생)

codingon 과제를 하던 중 질문이 발생하였다.

과제는 div와 span tag를 이용하여 2022 7월 달력 만들기

위 사진에서 같은 span tag에 display:inline-block; 했는데

text값이 들어간 span은 아래로(위에 빈칸 발생), text값이 들어가지 않은 span은 위로 붙어서(아래 빈칸 발생)

text가 있는 span과 없는 span이 같이 들어간 div칸만 height가 커져있음

뭐가 문제일까 해결 방법이 뭘까

📌 해결 방법

span 요소의 기본 속성인 vertical-align 속성이 base-line 으로 설정이 되어있기 때문에 발생하는 문제였다.

즉, span 요소의 경우 수직 정렬을 글자의 base-line 에 맞추어서 수직 정렬이 일어나는데

  같은 공백 문자도 없는 span 요소는 말 그대로 문자가 없기 때문에

inline-block으로 선언한 span 요소의 최하단이 해당 요소의 base-line 이 된다.

따라서 코드에서 해당 span 요소의 최하단과 옆에 있는 숫자 basline 이 정확하게 일치하시는 것을 볼 수 있다.

해당 문제를 해결 하시기 위해서는 span 요소에 vertical-align 속성 값을 bottom 으로 맞추면

각 span 요소의 최하단을 기준으로 수직 정렬이 발생하기 때문에 문제가 해결 된다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>span tag</title>
    <style>
        span {
            display: inline-block;
            /* vertical-align: baseline; */
            vertical-align: bottom;
            width: 100px;
            height: 100px;
        }

        .test1 {
            background-color: orange;
        }

        .test2 {
            font-size: 30px;
            background-color: skyblue;
        }

        .test3 {
            font-size: 50px;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <span class="test1"></span>
    <span class="test2">2</span>
    <span class="test3">1</span>

</body>
</html>

CSS 적용할 때 뭔가 내 뜻대로 안된다면,

해당 요소의 기본값을 확인해보자

728x90

'Client > HTML CSS' 카테고리의 다른 글

[CSS] CSS 상속 (0)	2022.06.21
[HTML] Select Tag, Input Tag (0)	2022.06.21
[HTML] HTML 구조 (0)	2022.06.19
[CSS] Flexbox (0)	2022.05.10
[CSS] 레이아웃 정리 display, position 완성 (0)	2022.05.10

'Client/HTML CSS' Related Articles

🌱 → 🌳

[HTML] Span Tag 본문

[HTML] Span Tag

📌 질문 (오류 발생)

📌 해결 방법

'Client > HTML CSS' 카테고리의 다른 글

티스토리툴바