padding-top attribute of inline elements-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

padding-top attribute of inline elements

巴扎黑

Jun 28, 2017 pm 02:30 PM

elementAttributes

The reason for this question is that during the interview some time ago, the interviewer asked me about the effect of margin and padding on inline elements, but I didn't seem to have much answer. I happened to have some time in the past two days to write a few demos to look at this problem, and found several pitfalls.

Go to the demo first:

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>

Please run the above two pieces of code using the same style sheet, and you will find a problem: although the padding-top of span is set , but it is not displayed in the browser, wtf!

1. Both span and input are inline elements. Why is the padding-top value set for input effective?

2. Bring out the w3c document http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#padding-properties

'padding -top',

padding-right

padding-bottom

', 'padding-left'##Value:

## | inheritall elements except table-row-group, table-header-group, table-footer-group, table-row, table-column -group and table-columnnoPercentages:##Media:Computed value:padding applies to all elements. When margin-top is set for these two elements, the performance of the two is completely different. Span is invalid for margin-top, but input is completely OK for margin-top setting? Why? See the document

	Initial: ##0
Applies to:
##Inherited:
refer to width of containing block
visual
the percentage as specified or the absolute length

'margin-top',

margin-bottom

#Value: |
inherit

0Applies to:refer to width of containing blockMedia:visualComputed value:the percentage as specified or the absolute length

Initial:
all elements except elements with table display types other than table-caption, table and inline-table
Inherited: no	##Percentages:


These properties have no effect on non-replaced inline elements. 那么这是为什么呢？重点来了， span是行内不可替换元素，而input是行内替换元素，第一次听说，哭瞎。先上文档： 10.6.1 Inline, non-replaced elements The 'height' property does not apply. The height of the content area should be based on the font, but this specification does not specify how. A UA may, e.g., use the em-box or the maximum ascender and descender of the font. (The latter would ensure that glyphs with parts above or below the em-box still fall within the content area, but leads to differently sized boxes for different fonts; the former would ensure authors can control background styling relative to the 'line-height', but leads to glyphs painting outside their content area.) Note: level 3 of CSS will probably include a property to select which measure of the font is used for the content height. The vertical padding, border and margin of an inline, non-replaced box start at the top and bottom of the content area, and has nothing to do with the 'line-height'. But only the 'line-height' is used when calculating the height of the line box. If more than one font is used (this could happen when glyphs are found in different fonts), the height of the content area is not defined by this specification. However, we suggest that the height is chosen such that the content area is just high enough for either (1) the em-boxes, or (2) the maximum ascenders and descenders, of all the fonts in the element. Note that this may be larger than any of the font sizes involved, depending on the baseline alignment of the fonts. 10.3.2 Inline, replaced elements A computed value of 'auto' for 'margin-left' or 'margin-right' becomes a used value of '0'. If 'height' and 'width' both have computed values of 'auto' and the element also has an intrinsic width, then that intrinsic width is the used value of 'width'. If 'height' and 'width' both have computed values of 'auto' and the element has no intrinsic width, but does have an intrinsic height and intrinsic ratio; or if 'width' has a computed value of 'auto', 'height' has some other computed value, and the element does have an intrinsic ratio; then the used value of 'width' is: (used height) * (intrinsic ratio) If 'height' and 'width' both have computed values of 'auto' and the element has an intrinsic ratio but no intrinsic height or width, then the used value of 'width' is undefined in CSS 2.1. However, it is suggested that, if the containing block's width does not itself depend on the replaced element's width, then the used value of 'width' is calculated from the constraint equation used for block-level, non-replaced elements in normal flow. Otherwise, if 'width' has a computed value of 'auto', and the element has an intrinsic width, then that intrinsic width is the used value of 'width'. Otherwise, if 'width' has a computed value of 'auto', but none of the conditions above are met, then the used value of 'width' becomes 300px. If 300px is too wide to fit the device, UAs should use the width of the largest rectangle that has a 2:1 ratio and fits the device instead. 注意加粗的内容，可替换元素是具有内部的宽，高，或者宽高比的。 Summary: For replacement elements such as input, margin and padding work in all directions, For span , a and other non-replaceable elements, Padding-left, padding-right have effects, padding-top has no effect. After being reminded by @meta-D in the comments, it was later verified that padding-bottom is invalid and only affects the style of the border. Please see comments for pictures. Margin-right and margin-left have effects, margin-top and margin-bottom have no effect. 4.16 Update: Recently, when I was reading the authoritative guide to CSS, the book said: The inner margin, border and outer margin of non-replaced elements have a significant impact on inline elements and their generated boxes. There is no vertical effect; that is, they do not affect the height of the inline box. (I still need to read more books) I always feel that the article is half-written, so for now, you can look at the link below, and I will dig deeper. Related links (Requires stairs to cross high walls): 　http://maxdesign.com.au/news/inline/ 　http: //stackoverflow.com/questions/12468176/what-is-a-non-replaced-inline-element 　http://melon.github.io/blog/2015/03/07/inline-replaced -vs-inline-nonreplaced/ 　http://reference.sitepoint.com/css/replacedelements

The above is the detailed content of padding-top attribute of inline elements. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

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

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

如何在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.*;

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

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

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

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

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

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

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

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

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

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