vertical-align의 사용용도를 정확히 모르겠어요
지우개
2023.04.01
다음 메인페이지 소스를보면
img,input,select,textarea{vertical-align:middle}
네이버는input,select,button{vertical-align:middle}img{vertical-align:top}
img에 vertical 속성을 주는건 div로 감싸고 높이를 따로 지정안했을때 이미지 높이만큼 나와야되는데몇px 조금 더 높게나오더라구요 그래서 vertical 속성을 주면(top이든 middle이든 bottom이든) 딱 자식요소(이미지) 높이만큼 높이가 되는데요다음은 전부 middle값을 주고 네이버는 이미지만 따로 top을 준 이유를 모르겠네요
그리고 글자로 테스트해봤는데좀 이해가 안가네요 ㅜㅜ뭔가 답답한 느낌....가까이 확대해서 확인한건데 둘중에 글자가 큰 곳을 기준으로 vertical 값을 주니top을 주면 작은 글자가 위로 오고 middle을주면 가운데 bottom을주면 작은글자가 큰 글자 기준으로 아래로 내려오네요근데 왜 박스안에서 상하 여백이 생기는지 모르겠어요검색해봐도 잘 이해가 안가서요이미지는 원본으로 보실수 있어요
vertical-align을 안 준 상태vertical-align:top;
vertical-align:middle;vertical-align:bottom;