before after 가상클래스 활용한 실전 퍼블리싱 04 질문입니다

Question

17분에서 들어보면 위아래 패딩값을 둘다 10를 줬는데도 불구하고 아래패딩이 더 주어져서 아래 패딩값을 따로 뺐는데요.

여기서 보면 인라인 블럭을 했기 때문에 안맞아서 그렇다고 설명하셨습니다. 여기서 이해가 안가서 그러는데 좀 자세히 설명해주실 수 있을까요?.

.gnb a {margin:0;paddin:0}을 해도 처리가 안먹히네요.

왜 안맞는건지 잘 모르겠습니다.

Answer

인라인 블록이 되면 오른쪽과 아래에 5~6픽셀 정도의 마진이 생깁니다.

그래서 아래쪽이 살짝 넓은 느낌이라 패딩을 아래쪽에 10픽셀 정도 준거에요.

만약 ul li a 구조로 만들었으면 a를 인라인블록이 아니라 블록으로 해주시면 됩니다.

그런데 지금 구조는 div a 로 된 구조라서 a를 블록으로 바꾸면 줄이 바뀌기 때문에 인라인블록으로 했습니다.

ul li a 구조로 하시면 우측과 아래에 5~6픽셀 정도의 마진이 생기지 않기 때문에 그런 문제가 없습니다.

하지만 ul li a 구조로 하면 계층구조가 하나 더 생겨서 좀 번거로운 점은 있습니다.