인라인 블록 대 줄 바꿈이라는 측면에서의 인라인 요소

단락 인 상위 요소 내부에는 텍스트와 몇 개의 앵커 링크가 있습니다. 이 앵커 링크가 자신의 표시가 inline-block로 설정하고 시각적 결과는 다음과 같습니다있다 : 나는 인라인으로 표시를 변경한다면 지금 https://imgur.com/a/aLR3Q 인라인 블록 대 줄 바꿈이라는 측면에서의 인라인 요소

을, 그 결과는 다음과 같습니다 https://imgur.com/a/TFof9

내 질문은, 왜 단지 inline 대신에 앵커 디스플레이가 inline-block으로 설정되어 있습니다. "soft line break"라고 해봅시다. 줄 바꿈이라는 측면에서 보면 두 가지 디스플레이가 같은 방식으로 작동하고 전혀 중단되지 않는다고 생각했기 때문입니다.

코드에 대한

Codepen 링크 : https://codepen.io/Kestvir/pen/zpvmYV

부모 요소의 코드 : 앵커에 대한

.footer__copyright { 
    border-top: 1px solid #777; 
    padding-top: 2rem; 
    width: 80%; 
    float: right; 
}

코드 :

footer__link:link, .footer__link:visited { 
    color: #f7f7f7; 
    background-color: #333; 
    text-decoration: none; 
    text-transform: uppercase; 
    display: inline-block; 
    transition: all .2s; 
}

앵커는 다음과 같습니다

<a href="#" class="footer__link">Jonas Schmedtmann</a>

하여 인라인 블록이 정상 인라인 요소와 같은 여러 줄에 걸쳐 분할 할 수 없기 때문에

및

<a href="#" class="footer__link">Advanced CSS and Sass</a>

출처

2017-12-16 KestVir

''inline-block '은 줄을 가로 질러 깨질 수 없습니다; 마치 큰 편지 인 것처럼 행동합니다. – AlexP

줄 바꿈이 발생합니다. 인라인으로 표시되는 하나의 전체 "블록 단위"입니다. 그 전체 유닛이 맞지 않으면, 모든 유닛은 다음 줄로 감싸 여질 것입니다.

출처

2017-12-17 08:33:53 Wilson

인라인 블록 대 줄 바꿈이라는 측면에서의 인라인 요소

답변

관련 문제