인라인 요소의 padding-top 속성-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

인라인 요소의 padding-top 속성

巴扎黑

Jun 28, 2017 pm 02:30 PM

요소재산

이 질문을 하게 된 이유는 얼마 전 인터뷰에서 면접관님이 인라인 요소에 마진과 패딩을 적용했을 때의 효과에 대해 질문하셨는데, 제가 별로 답변을 못한 것 같습니다. 나는 지난 이틀 동안 우연히 이 문제를 살펴보기 위해 몇 가지 데모를 작성했고 몇 가지 함정을 발견했습니다.

먼저 데모로 이동하세요:

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-top',

padding-right

padding-bottom

'padding-left'값:

상속table-row-group, table-header-group, table-footer-group, table-row, table-column을 제외한 모든 요소 -그룹 및 테이블 열미디어: 계산된 값 :패딩은 모든 요소에 적용됩니다. 이 두 요소에 대해 margin-top을 설정하면 두 요소의 성능이 완전히 다릅니다. margin-top에는 스팬이 유효하지 않지만 margin-top 설정에는 입력이 완전히 OK인가요? 왜? 문서 참조

	초기: 0
적용 대상:
상속:	no
백분율: 포함 블록 너비 참조
vis ual
지정된 백분율 또는 절대 길이

'margin-top',

margin-bottom

| 상속
초기:0테이블 캡션, 테이블 및 인라인 테이블 이외의 테이블 표시 유형이 있는 요소를 제외한 모든 요소novisual지정된 백분율 또는 절대 길이
이러한 속성은 대체되지 않은 인라인 요소에는 영향을 미치지 않습니다. 입력是行内替换元素，
第一次听说，哭瞎。
先上文档：
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'
에 계산된 값 'auto'가 있고 요소에 고유 너비가 있는 경우 해당 고유 너비는
'width'
의 사용된 값입니다.그렇지 않은 경우
'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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

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

관련 기사

如何在Python中获取整数字面量属性而不是SyntaxError？Aug 20, 2023 pm 07:13 PM

TogetintliteralattributeinsteadofSyntaxError,useaspaceorparenthesis.TheintliteralisapartifNumericLiteralsinPython.NumericLiteralsalsoincludesthefollowingfourdifferentnumericaltypes−int(signedintegers)−Theyareoftencalledjustintegersorints,arepositiveo

Python的dir()函数：查看对象的属性和方法Nov 18, 2023 pm 01:45 PM

Python的dir()函数：查看对象的属性和方法，需要具体代码示例摘要：Python是一种强大而灵活的编程语言，其内置函数和工具为开发人员提供了许多方便的功能。其中一个非常有用的函数是dir()函数，它允许我们查看一个对象的属性和方法。本文将介绍dir()函数的用法，并通过具体的代码示例来演示其功能和用途。正文：Python的dir()函数是一个内置函数，

如何在Java中使用Gson重命名JSON的属性？Aug 27, 2023 pm 02:01 PM

Gson@SerializedName注释可以序列化为JSON，并将提供的名称值作为其字段名称。此注释可以覆盖任何FieldNamingPolicy，包括可能已在Gson实例上设置的默认字段命名策略。可以使用GsonBuilder类设置不同的命名策略。语法@Retention(value=RUNTIME)@Target(value={FIELD,METHOD})public@interfaceSerializedName示例importcom.google.gson.annotations.*;

Win11磁盘属性未知怎么办Jul 03, 2023 pm 04:17 PM

　　Win11磁盘属性未知怎么办？近期Win11用户在电脑的使用中，发现系统出现提示磁盘错误的情况，这是怎么回事儿呢？而且应该如何解决呢？很多小伙伴不知道怎么详细操作，小编下面整理了Win11磁盘出错的解决步骤，如果你感兴趣的话，跟着小编一起往下看看吧！　　Win11磁盘出错的解决步骤　　1、首先，按键盘上的Win+E组合键，或点击任务栏上的文件资源管理器；　　2、文件资源管理器的右侧边栏，找到边右键点击本地磁盘（C：），在打开的菜单项中，选择属性；　　3、本地磁盘（C：）属性窗口，切换到工具选

使用Vue.set函数实现动态添加属性的方法和示例Jul 24, 2023 pm 07:22 PM

使用Vue.set函数实现动态添加属性的方法和示例在Vue中，如果我们想要动态地添加一个属性到一个已经存在的对象上，通常会使用Vue.set函数来实现。Vue.set函数是Vue.js提供的一个全局方法，它能够在添加属性时保证响应式更新。本文将介绍Vue.set的使用方法，并提供一个具体的示例。首先，在Vue中，我们通常会使用data选项来声明响应式的数据。

pageXOffset属性在JavaScript中的作用是什么？Sep 16, 2023 am 09:17 AM

如果您想获取文档从窗口左上角滚动到的像素，请使用pageXoffset和pageYoffset属性。对水平像素使用pageXoffset。示例您可以尝试运行以下代码来了解如何在JavaScript中使用pageXOffset属性-现场演示<!DOCTYPEhtml><html>  <head>   <style>  &

position有哪些属性Oct 10, 2023 am 11:18 AM

position属性取值有static、relative、absolute、fixed和sticky等。详细介绍：1、static是position属性的默认值，表示元素按照正常的文档流进行布局，不进行特殊的定位，元素的位置由其在HTML文档中的先后顺序决定，无法通过top、right、bottom和left属性进行调整；2、relative是相对定位等等。

如何在一个声明中设置不同的背景属性？Sep 15, 2023 am 09:45 AM

CSS（层叠样式表）是设计网站视觉外观的强大工具，包括背景属性。使用CSS，可以轻松自定义网页的背景属性，创造独特的设计，提升用户体验。使用一个声明是设置各种背景属性的高效方式，对于网页开发人员来说，这有助于节省时间并保持代码简洁。理解背景属性在一个声明中设置多个背景属性之前，我们需要了解CSS中可用的不同背景属性并了解每个属性的工作原理。以下是每个属性的简要概述。背景颜色−此属性允许设置元素的背景颜色。Background-image-此属性允许设置元素的背景图像。使用图像URL、线性渐变或径

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.