>  기사  >  웹 프론트엔드  >  인라인 속성은 무엇을 의미하나요?

인라인 속성은 무엇을 의미하나요?

藏色散人
藏色散人원래의
2020-07-02 10:43:303406검색

inline 속성은 인라인 스타일 속성을 의미하고, style 속성은 요소의 인라인 스타일을 지정하며, inline 요소에도 박스 모델이 있기 때문에 인라인 요소에 너비, 너비 등 다양한 CSS 속성을 설정할 수 있습니다. 높이, 패딩, 여백 등

인라인 속성은 무엇을 의미하나요?

style 속성은 요소의 인라인 스타일을 지정합니다.

Inline 요소 속성 설정

Inline 요소에도 상자 모델이 있습니다.

Inline 요소에도 상자 모델이 있으므로 인라인을 제공할 수 있습니다. 요소 요소는 너비, 높이, 패딩 및 여백과 같은 다양한 CSS 속성을 설정합니다. 인라인 요소는 이러한 속성을 설정해야 합니까?

인라인 요소의 너비와 높이 설정

인라인 요소의 너비와 높이를 설정하는 것은 유효하지 않습니다

.span1 {
    height: 200px;
    width: 200px;
}
 
<span class=&#39;span1&#39;>行内元素设置宽度和高度</span>

이 때 페이지와 상자의 렌더링된 모델을 관찰하면 다음을 찾을 수 있습니다.

인라인 요소에 너비와 높이가 설정되어 있어도 인라인 요소에 표시되는 특정 너비와 높이는 콘텐츠 자체의 너비와 높이이므로 인라인 요소에 너비와 높이를 설정하는 것은 유효하지 않습니다

패딩 및 높이 설정 인라인 요소의 여백

은 왼쪽과 오른쪽에 영향을 주지만 위쪽과 아래쪽에는 영향을 주지 않습니다.

인라인 요소는 위쪽과 아래쪽 부분의 특정 값 성능을 설정합니다.

<span class=&#39;span2&#39;>行内元素设置边距上下属性</span><br>
 
.span2 {
    padding-top: 20px;
    padding-bottom: 30px;
    margin-top: 40px;
    margin-bottom: 50px;
}

위 그림에서 확인할 수 있습니다. 인라인 요소에 padding-top, padding-bottom, margin-top, margin-bottom 속성을 설정했지만, 이러한 속성은 특별한 효과가 없는 것처럼 보이지만 다른 요소에는 영향을 주지 않습니다.

인라인 요소에 대한 패딩 및 여백을 설정합니다.

<span class=&#39;span3&#39;>行内元素设置边距左右属性</span><br>
 
.span3 {
    padding-left: 100px;
    padding-right: 200px;
    margin-left: 300px;
    margin-right: 400px;
}

위 그림에서 볼 수 있듯이 padding-left, padding-right, margin-를 설정하면 됩니다. 인라인 요소의 left, margin-right 속성은 행 내 요소의 위치에 영향을 미칩니다

더 많은 관련 지식을 보려면

PHP 중국어 웹사이트

를 방문하세요!

위 내용은 인라인 속성은 무엇을 의미하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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