Worth spreading

[css] display: inline 사이즈 조절 문제 본문

Web programming/html&css

[css] display: inline 사이즈 조절 문제

annual 2018. 7. 29. 18:40


div태그 박스의 크기를 조정하려고 width height값을 주는데 이게 아무리 조정을 해도 값이 적용되지 않는 것이다..

그런데 친절한 visualstudio code에서 이런 경고를 주더라

[css] Property is ignored due to the display. With 'display: inline', the width, height, margin-top, margin-bottom, and float properties have no effect.


그것도 모르고 이값 저값 넣어보면서 왜 안되냐고 분개했었는데...


한마디로 말하면

display를 inline으로 설정 시 width, height, margin-top, margin-bottom, float 설정이 먹히지 않는다. 


그래서 inline처럼 나란히 놓되 width height등 위의 프로퍼티들도 조정하고 싶다면


display: inline-block을 쓰자


다른 방법도 있겠지만 현재 내가 아는 방법은 이것이다!


참고:  https://www.w3schools.com/css/tryit.asp?filename=trycss_inline-block_span1


Comments