인라인 요소의 padding-top 속성
- 巴扎黑원래의
- 2017-06-28 14:30:182100검색
이 질문을 하게 된 이유는 얼마 전 인터뷰에서 면접관님이 인라인 요소에 마진과 패딩을 적용했을 때의 효과에 대해 질문하셨는데, 제가 별로 답변을 못한 것 같습니다. 나는 지난 이틀 동안 우연히 이 문제를 살펴보기 위해 몇 가지 데모를 작성했고 몇 가지 함정을 발견했습니다.
먼저 데모로 이동하세요:
style sheet
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.inline{
border: 1px solid red;
padding: 20px;
}
</style>html code 1:
<body>
<span class="inline">span</span>
<span class="inline">span</span>
<span class="inline">span</span>
</body>html code 2
<body>
<input type="text" class="inline" value="input" />
<input type="text" class="inline" value="input" />
<input type="text" class="inline" value="input" />
</body>위의 두 코드를 동일한 스타일 시트를 사용하여 실행하세요. 문제점 발견: 스팬의 패딩 상단이 설정되었으나 브라우저에 표시되지 않습니다. 왜 스팬과 입력이 인라인 요소인지 입력에 적용됩니다.
2 w3c 문서를 얻으세요 http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#padding-properties
'
padding-right',
'padding-bottom
',| 초기: 0 | |
| 적용 대상: | |
| 상속: | no |
| 백분율: 포함 블록 너비 참조 | |
| vis ual | 계산된 값 : |
| 지정된 백분율 또는 절대 길이 | |
| 이 두 요소에 대해 margin-top을 설정하면 두 요소의 성능이 완전히 다릅니다. | margin-top에는 스팬이 유효하지 않지만 margin-top 설정에는 입력이 완전히 OK인가요? 왜? 문서 참조 |
'margin-top',
'margin-bottom
'- 값:
-
e8f3766abb6267a369212215bdc10315 | 상속
- 초기:
0 테이블 캡션, 테이블 및 인라인 테이블 이외의 테이블 표시 유형이 있는 요소를 제외한 모든 요소적용 대상: 상속됨: no 백분율: 포함 블록 너비 참조 미디어: visual계산된 값: 지정된 백분율 또는 절대 길이이러한 속성은 대체되지 않은 인라인 요소에는 영향을 미치지 않습니다. 입력是行内替换元素，
第一次听说，哭瞎。先上文档：10.6.1 인라인, 대체되지 않은 요소 'height'
속성은 적용되지 않습니다. 콘텐츠 영역의 높이는 글꼴에 따라 결정되어야 하지만, 본 사양에서는 그 방법을 지정하지 않습니다. UA는 예를 들어 em-box 또는 글꼴의 최대 오름차순 및 내림차순을 사용할 수 있습니다. (후자는 em-상자 위 또는 아래 부분이 있는 글리프가 여전히 콘텐츠 영역 내에 있도록 보장하지만 다양한 글꼴에 대해 서로 다른 크기의 상자로 이어집니다. 전자는 작성자가 '줄 높이'를 기준으로 배경 스타일을 제어할 수 있도록 합니다. , 그러나 콘텐츠 영역 외부에 글리프 그림이 표시됩니다.)참고: CSS의 레벨 3에는 콘텐츠 높이에 사용되는 글꼴 크기를 선택하는 속성이 포함될 수 있습니다.세로 패딩, 테두리 및 여백 대체되지 않은 인라인 상자는 콘텐츠 영역의 상단과 하단에서 시작하며 'line-height'와는 아무 관련이 없습니다. 하지만 줄 상자의 높이를 계산할 때는
'line-height'만 사용됩니다
.두 개 이상의 글꼴이 사용되는 경우(글리프가 다른 글꼴에서 발견될 때 발생할 수 있음) 콘텐츠 영역의 높이 이 사양에서는 정의되지 않습니다. 그러나 콘텐츠 영역이 (1) em 상자 또는 (2) 요소에 있는 글꼴의 모든 최대 어센더 및 디센더에 맞게 충분히 높도록 높이를 선택하는 것이 좋습니다. 이는 글꼴의 기준 정렬에 따라 관련된 글꼴 크기보다 클 수 있습니다.
10.3.2 인라인, 대체 요소''margin-left'에 대해 'auto'로 계산된 값 또는
'margin-right'은 사용된 값 '0'이 됩니다.
'height'및 'width' 모두 계산된 값이 'auto'이고 요소에 내재적 너비도 있는 경우 , 그러면
intrinsic너비는 'width'의 사용된 값입니다. 'height' 및 'width' 둘 다 계산된 값 'auto'를 갖고 요소에 intrinsic 너비가 없는 경우, 하지만
본질적높이와 본질적 비율이 있습니다. 또는 'width'에 계산된 값 'auto'가 있고, 'height'에 다른 계산된 값이 있고 요소에 고유 비율이 있는 경우 'width'의 사용된 값은 다음과 같습니다.(사용된 높이) * (고유 비율)'height' 및 'width' 모두 계산된 값 'auto'를 갖고 요소에 고유 비율은 있지만 고유 높이나 너비가 없는 경우 사용된 '너비' 값은 CSS 2.1에서 정의되지 않습니다. 그러나 포함하는 블록의 너비가 대체된 요소의 너비에 자체적으로 의존하지 않는 경우 사용된 '너비' 값은 일반 흐름에서 대체되지 않은 블록 수준 요소에 사용되는 제약 방정식에서 계산되는 것이 좋습니다.
그렇지 않고
'width''width'
에 계산된 값 'auto'가 있고 요소에 고유 너비가 있는 경우 해당 고유 너비는의 사용된 값입니다.그렇지 않은 경우
'width ''auto'라는 계산된 값이 있지만 위의 조건 중 어느 것도 충족되지 않으면 'width'의 사용된 값은 300px가 됩니다. 300px가 기기에 맞지 않을 정도로 넓은 경우, UA는 2:1 비율을 갖고 기기에 맞는 가장 큰 직사각형의 너비를 대신 사용해야 합니다. ，或者宽高比的。
요약:
입력, 여백, 패딩 등의 대체 요소가 모든 방향에서 작동하는 경우,
span, a 등 대체 불가능한 요소의 경우,
Padding-left, padding-right 둘 다 효과가 있지만 padding-top은 효과가 없습니다.
댓글에서 @meta-D가 상기시켰듯이, padding-bottom은 유효하지 않으며 테두리 스타일에만 영향을 미치는 것으로 나중에 확인되었습니다. 사진은 댓글을 참조해주세요.
Margin-right 및 margin-left에는 효과가 있고, margin-top 및 margin-bottom에는 효과가 없습니다.
업데이트 4.16:
최근 CSS에 대한 권위 있는 가이드를 읽었을 때 책에서는 다음과 같이 말했습니다. 즉, 대체되지 않은 요소의 패딩, 테두리 및 여백은 인라인 요소 및 생성된 상자에 수직 효과가 없습니다. , 인라인 상자의 높이에는 영향을 미치지 않습니다. (아직 책을 더 읽어야 함)
글이 반쯤 쓰여졌다는 느낌이 항상 있어서 우선은 아래 링크를 확인하시고 더 깊게 파헤쳐보도록 하겠습니다.
관련 링크(높은 벽을 넘어가려면 계단이 필요함):
http://maxdesign.com.au/news/inline/
http://stackoverflow.com/questions/12468176/what-is- a- 비대체-인라인 요소
http://melon.github.io/blog/2015/03/07/inline-replaced-vs-inline-nonreplaced/
http://reference.sitepoint.com /css /대체요소
위 내용은 인라인 요소의 padding-top 속성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!