float 레이아웃편에서 질문있습니다.

Question

메뉴만드는 과정에서 a태그가 inline속성이라 패딩의 경우 넓이값은 먹지만 높이값이 먹지않기때문에 블럭요소로 바꾸라하셨는데 여기서 인라인 블럭으로 바꿔도 무방할까요? 이런경우 블럭요소와,인라인블럭요소의 사용에 따른 차이점이 궁금해요~

Camp_멘토 · Answer

안녕하세요 kyungee님

먼저 block 속성과 inline-block 속성의 차이에 대해서 설명드리겠습니다.
block 속성은 무조건 한 줄을 점유하고 있으며, 다음 태그는 무조건 줄바꿈으로 적용됩니다.

inline-block 속성은 inline 속성과 비슷하지만 (줄바꿈을 하지 않고, 동일한 라인에 작성가능) inline속성에서 할 수 없었던 width/height, margin/padding, line-height를 적용할 수 있습니다.

또한 만약에 width/height 값을 지정하지 않는다면, block요소는 부모요소 전체를 width/height로 가지며,
inline-block 요소는 자기 자신의 크기만큼만 width/height를 가지게 됩니다.

만약 함께 있는 형제요소에서 한 줄로 배치하고 싶다면 inline-block을 주셔도 무방하지만 현재 li 태그 안에는 a 요소만 존재하며 a 태그가 inline 속성과 block 속성을 동시에 가질 이유가 없으니 block 요소를 선택했습니다.

css 속성에서 각 속성들이 어떤 것을 의미하는지를 알고 있으면 속성을 선택할 때 도움이 많이 되겠습니다 :)
오늘 공부도 화이팅!