CSS 디스플레이: 인라인 vs 인라인 블록

CSS 디스플레이: 인라인 vs 인라인 블록

이 질문에는 이미 다음과 같은 답이 있습니다.

디스플레이: 인라인과 디스플레이: 인라인 블록의 차이점은 무엇입니까? (7개 답변)

마감됨3년 전에.

CSS에서,display의 가치를 가질 수 있습니다.inline그리고.inline-block사이의 차이점을 자세히 설명할 수 있는 사람이 있습니까?inline그리고.inline-block?

내가 모든 곳을 찾아봤는데, 가장 자세한 설명은 나에게 말해줍니다.inline-block로 배치됩니다.inline하지만 처럼 행동합니다.block하지만 그것은 "블록으로서 행동하라"가 정확히 무엇을 의미하는지 설명하지 않습니다.특별한 특징이 있습니까?

예를 들어 훨씬 더 나은 대답이 될 것입니다.감사해요.

인라인 요소:

1. 좌우 여백과 패딩은 존중하되 상하는 존중하지 않습니다.
2. 너비 및 높이를 설정할 수 없습니다.
3. 다른 요소를 왼쪽과 오른쪽에 배치할 수 있습니다.
4. 여기에서 매우 중요한 참고 사항을 참조하십시오.

블록 요소:

1. 그 모든 것을 존중합니다.
2. 블록 요소 뒤에 줄 바꿈 강제 실행
3. 너비가 정의되지 않은 경우 전체 너비를 가져옵니다.

인라인 블록 요소:

1. 다른 요소를 왼쪽과 오른쪽에 배치합니다.
2. 상하 여백 및 패딩을 존중합니다.
3. 높이와 너비를 존중합니다.

W3 학교 출신:

• 인라인 요소는 앞이나 뒤에 줄 바꿈이 없으며 옆에 있는 HTML 요소를 허용합니다.

• 블록 요소는 위와 아래에 공백이 있으며 옆에 HTML 요소를 허용하지 않습니다.

• 인라인 블록 요소는 인라인 요소(인접 콘텐츠와 동일한 줄에 있음)로 배치되지만 블록 요소로 작동합니다.

이를 시각화하면 다음과 같습니다.

이미지는 이 페이지에서 가져온 것으로, 이 주제에 대해 더 자세히 설명합니다.

언급URL : https://stackoverflow.com/questions/9189810/css-display-inline-vs-inline-block