margin 속성은 인라인 요소에 영향을 주지 않습니다.

Margin은 블록 수준 요소와 인라인 요소에 다른 영향을 미칩니다. 인라인 요소에서 여백 속성은 가로 왼쪽 및 오른쪽 여백이 아닌 세로 위쪽 및 아래쪽 여백에만 영향을 미칩니다.

예를 들어 HTML에는 단락 요소 <p></p>가 있으며 이에 대한 스타일을 설정하고 여백 속성의 효과를 관찰할 수 있습니다.

HTML 코드는 다음과 같습니다.

<p class="example">这是一个段落</p>

CSS 코드는 다음과 같습니다.

.example {
  margin: 20px;
  background-color: lightblue;
  display: inline;
  padding: 10px;
}

위 코드는 "example" 클래스로 단락 요소를 설정하고 배경색은 연한 파란색으로 설정합니다. 10px로 설정하고 표시 속성을 인라인 요소로 설정합니다.

위 코드를 브라우저에서 실행하면 margin 속성이 인라인 요소의 상단 및 하단 여백에 유효하고 단락 요소의 상단 및 하단 여백은 20px임을 알 수 있습니다.

그러나 인라인 요소에 대해 왼쪽 및 오른쪽 여백을 설정하려고 하면 설정된 여백 값이 인라인 요소에 아무런 영향을 미치지 않는다는 것을 알 수 있습니다. 예를 들어 다음 코드를 시도해 보세요.

.example {
  margin: 20px 50px; /* 不会对行内元素产生效果 */
}

예제 코드에서는 인라인 요소에 대해 20px 위쪽/아래쪽 여백과 50px 왼쪽/오른쪽 여백을 설정하려고 시도했지만 브라우저는 이러한 여백을 표시하지 않습니다.

이 현상이 인라인 요소에 대한 여백 속성이 완전히 유효하지 않다는 것을 의미하지는 않습니다. 패딩 속성, 표시 속성 및 의사 요소와 같은 다른 CSS 속성 및 기술을 사용하여 유사한 효과를 얻을 수 있습니다.

위 내용은 margin 속성은 인라인 요소에 영향을 주지 않습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!