왜 'margin-top'은 'inline-block'에서는 작동하지만 'inline'에서는 작동하지 않습니까?
- Mary-Kate Olsen원래의
- 2024-11-27 10:10:10951검색
Margin-Top이 Inline-Block에서는 작동하지만 Inline에서는 작동하지 않는 이유
웹 개발에서 inline과 inline-block의 차이점 이해 페이지에서 요소의 동작을 형성하는 데 매우 중요합니다. 이 질문은 이 두 디스플레이 속성 사이의 상단 여백 적용 불일치를 명확히 하려고 시도합니다.
Inline 및 Inline-Block
CSS2 사양에서는 인라인을 나타내는 값으로 정의합니다. 인라인 요소. 이러한 요소는 중단 없이 하나의 연속된 선으로 나타납니다. 반면에 Inline-block은 인라인 수준 블록 컨테이너를 생성합니다. 즉, 이러한 요소는 인라인 형식 내의 블록처럼 동작합니다. CSS2 문서에 설명된 대로:
- Inline: "이 값은 요소가 하나 이상의 인라인 상자를 생성하도록 합니다."
- Inline-block: "이 값은 요소가 다음을 수행하도록 합니다. 인라인 수준 블록 컨테이너를 생성합니다. 인라인 블록 내부는 블록 상자로 형식화되고 요소 자체는 원자적 인라인 수준으로 형식화됩니다. box."
여백 존중
게다가 CSS2 사양에서는 인라인 요소의 여백 존중에 대해 설명합니다.
"인라인 서식에서 컨텍스트에 따라 상자는 포함 블록의 상단에서 시작하여 수평으로 하나씩 배치됩니다. 이러한 상자 사이의 패딩은 존중됩니다."
이러한 구별은 margin-top이 인라인 요소에서 작동하지 않는 이유를 설명합니다. 인라인 요소는 수평 여백만 존중하도록 제한되는 반면, 인라인 블록과 같은 블록 수준 요소는 수평 및 수직 여백을 모두 존중합니다.
예
HTML과 CSS를 고려하세요. 질문에 제공됨:
<!DOCTYPE html> <head> <link rel="stylesheet" type="text/css" href="MyFirstWebsite.css"> <title>Max Pleaner's First Website</title> </head> <body> <h1>Welcome to my site.</h1> </body> </html>
body {
background-image: url('sharks.jpg');
}
h1 {
background-color: #1C0245;
display: inline;
padding: 6.5px 7.6px;
margin-left: 100px;
margin-top: 25px;
}
이 경우 h1 요소는 표시 속성이 인라인으로 설정된 경우 가로 여백을 100px로 표시합니다. 그러나 표시 속성이 inline-block으로 변경되면 25px의 margin-top이 적용되며, h1 요소는 인라인 컨텍스트 내에서 블록 수준 요소로 처리됩니다.
위 내용은 왜 'margin-top'은 'inline-block'에서는 작동하지만 'inline'에서는 작동하지 않습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!