before after 가상클래스 활용한 실전 퍼블리싱 04 질문... - 인프런

인프런 커뮤니티 질문&답변

작성한 질문수

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

가상클래스 before after 가상클래스 활용한 실전 퍼블리싱 04(content attr을 활용한 텍스트 네비게이션)

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

작성

154

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

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

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

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

답변 1

지식공유자

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

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

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

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

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

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

작성한 질문수