왜 'margin-top'은 'inline-block'에서는 작동하지만 'inline'에서는 작동하지 않습니까?-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

왜 'margin-top'은 'inline-block'에서는 작동하지만 'inline'에서는 작동하지 않습니까?

Mary-Kate Olsen

Nov 27, 2024 am 10:10 AM

Why Does `margin-top` Work with `inline-block` but Not with `inline`?

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.