我不確定你是否會(huì)認(rèn)為這是對(duì)你的問(wèn)題的完整答案,因?yàn)槲抑滥阏谑褂?lt; td>在您的示例中,< td>之間存在一個(gè)差異.和< dd>或者< li>元素是< td>的事實(shí).在不破壞< table>的情況下,元素不能與其周圍元素相抵消具體行為.但至少我可以回答你的第三個(gè)問(wèn)題的一部分：

If it’s true that it’s not possible to define a CSS rule which creates the same format for both kinds of HTML…

事實(shí)并非如此,你總是可以渲染一個(gè)浮動(dòng)：前面的偽元素,寬度為100％;設(shè)置,并設(shè)置兄弟的一半邊緣< p>它上面的元素.

dd {

border: 1px dashed lightblue; /* this line is for demonstration purposes only */

}

dd:before {

float: left;

content: "";

width: 100%;

margin: 0.5em;

}

An introductory sentence as a text node.

A further sentence as a paragraph.

An introductory sentence as a paragraph.

A further sentence as a paragraph.

這引入了一個(gè)空的“虛擬”段落,它只影響< dd>的直接文本節(jié)點(diǎn).作為< p>元素只會(huì)執(zhí)行their automatic margin collapsing magic而不是向下移動(dòng).我認(rèn)為這證明至少可以定義一個(gè)CSS規(guī)則,它為這兩種HTML創(chuàng)建相同的格式.

這是如何工作的,或者至少我理解這是如何工作的. W3C在CSS規(guī)范中有一個(gè)例子,它告訴我們問(wèn)題中的文本節(jié)點(diǎn)必須是anonymous block box,因?yàn)樗且粋€(gè)文本節(jié)點(diǎn),在一個(gè)帶有display：block的框內(nèi)呈現(xiàn);設(shè)置,< dd>,它有一個(gè)帶display：block的兄弟;設(shè)置,< p>.

通過(guò)添加偽元素 – 在此匿名塊框內(nèi)呈現(xiàn)(它必須是,因?yàn)榉駝t它將永遠(yuǎn)不會(huì)像內(nèi)聯(lián)元素一樣,或者它可能呈現(xiàn)為兩個(gè)anonymous inline boxes,沒(méi)有包含塊框) – 但無(wú)論如何,我們最終得到兩個(gè)匿名內(nèi)聯(lián)框(偽元素和文本節(jié)點(diǎn)).

下一步是獲取這些匿名內(nèi)聯(lián)框中的第一個(gè),偽元素,并通過(guò)向左浮動(dòng)將其從正常流中取出,然后將其寬度設(shè)置為100％,并使其占據(jù)與高度匹配的高度兄弟&< p>的余量(我通過(guò)設(shè)置< p>的余量的一半來(lái)完成,但你可以通過(guò)設(shè)置與< p>的匹配的高度或下邊距來(lái)做同樣的事情.保證金).

現(xiàn)在前面的文本節(jié)點(diǎn)有一個(gè)人為的上邊距.問(wèn)題仍然存在,為什么這不會(huì)影響< p>如果沒(méi)有前面的文本節(jié)點(diǎn)？我認(rèn)為這是因?yàn)?– 因?yàn)闆](méi)有前面的文本節(jié)點(diǎn) – 偽元素本身被渲染為應(yīng)用它的元素內(nèi)的空匿名塊框(作為偽元素,內(nèi)容總是在應(yīng)用它們的元素內(nèi)部呈現(xiàn)),這與渲染空的< span>基本相同< p>之前的元素.

這是一個(gè)概念證明：

dd {

border: 1px dashed lightblue;

}

span {

float: left;

height: 1em;

width: 100%;

background-color: lightgray;

}

dd:not(:first-child)::before {

content: "";

float: left;

height: 1em;

width: 100%;

background-color: lightgray;

}

The dashed light blue line marks the paragraphs margin Box,the light grey Box is the span.

The dashed light blue line marks the paragraphs margin Box,the light grey Box is the pseudo element.

這個(gè)“人工邊緣”是一個(gè)左浮動(dòng)的塊框(在偽元素的情況下是匿名塊框)在其包含元素內(nèi).如果他們需要,所有其他的塊盒都將向下移動(dòng)(因?yàn)樗鼈兪歉鶕?jù)W3C floating spec假設(shè)浮動(dòng)盒子沒(méi)有為它們留下任何空間),這只發(fā)生在浮動(dòng)盒開(kāi)始超出它的邊緣時(shí)隱藏,并且它不會(huì)在這個(gè)特定問(wèn)題的解決方案中發(fā)生,因?yàn)槲姨匾鈱⑷斯み吘壴O(shè)置為與< p>的實(shí)際邊緣一樣高.

我認(rèn)為秘密在于W3C浮動(dòng)規(guī)范的這一部分,這有點(diǎn)難以理解：

Since a float is not in the flow,non-positioned block Boxes created

before and after the float Box flow vertically as if the float did not

exist. However,the current and subsequent line Boxes created next to

the float are shortened as necessary to make room for the margin Box

of the float.

A line Box is next to a float when there exists a vertical position

that satisfies all of these four conditions: (a) at or below the top

of the line Box,(b) at or above the bottom of the line Box,(c) below

the top margin edge of the float,and (d) above the bottom margin edge

of the float.

Note: this means that floats with zero outer height or negative outer

height do not shorten line Boxes.

If a shortened line Box is too small to contain any content,then the

line Box is shifted downward (and its width recomputed) until either

some content fits or there are no more floats present. Any content in

the current line before a floated Box is reflowed in the same line on

the other side of the float. In other words,if inline-level Boxes are

placed on the line before a left float is encountered that fits in the

remaining line Box space,the left float is placed on that line,

aligned with the top of the line Box,and then the inline-level Boxes

already on the line are moved accordingly to the right of the float

(the right being the other side of the left float) and vice versa for

rtl and right floats.

我理解這是指“在浮動(dòng)框垂直流動(dòng)之前和之后創(chuàng)建的非定位塊框,就像浮動(dòng)不存在一樣”,因此< p> s,非定位塊框不應(yīng)受到浮箱子.

但這并不意味著什么.相反,它指出,當(dāng)盒子向左浮動(dòng)時(shí),在浮動(dòng)盒子的右側(cè)創(chuàng)建一個(gè)線框,填充浮動(dòng)盒子右側(cè)和容納盒子右側(cè)之間的空間.并且在該行框內(nèi)部存在塊框,該框是隨后的< p>元件.如果那< p>元素可以適合滿足上述四個(gè)條件的空間,它將位于行框中的浮點(diǎn)旁邊.

由于浮點(diǎn)數(shù)設(shè)置為100％的寬度,因此< p>不適合浮動(dòng)的盒子旁邊,它坐在它的線框內(nèi),向下移動(dòng)到下一行,它以某種方式神奇地決定部分地遵守規(guī)則的第一部分：“之前創(chuàng)建的非定位塊盒和在浮動(dòng)框垂直流動(dòng)之后,好像浮動(dòng)不存在“,這似乎只是邊緣的真實(shí),因?yàn)橹灰?dòng)框超出邊距,塊框就會(huì)開(kāi)始向下移動(dòng),也許是因?yàn)樗挥谶€有一個(gè)線盒..

現(xiàn)在除了< td>之外的所有內(nèi)容如果通過(guò)將包含內(nèi)容的元素與其包含元素相抵消可以輕松完成,則可以輕松地將頂部添加的空間消失,這將非常簡(jiǎn)單.

dd {

position: absolute;

margin-top: -1em;

}

dd:before {

float: left;

content: "";

width: 100%;

margin: 0.5em;

}

div {

position: relative;

/* everything below this line is for demonstration purposes only */

border-top: 1px dashed lightblue;

height: 80px;

}

An introductory sentence as a text node.

A further sentence as a paragraph.

An introductory sentence as a paragraph.

A further sentence as a paragraph.

我認(rèn)為回答第二個(gè)問(wèn)題,至少對(duì)于< dd>和< li>元素,甚至允許前一個(gè)文本節(jié)點(diǎn)中的內(nèi)聯(lián)元素.

如果你想在< td>內(nèi)進(jìn)行此操作你必須開(kāi)始管理< td>或< table>高度其他方式,因?yàn)槟惚仨氃?lt; td>內(nèi)使用絕對(duì)定位.并通過(guò)將表格單元格設(shè)置為display來(lái)阻止表格增長(zhǎng)的默認(rèn)表格行為：block; (或者通過(guò)在< td>中渲染一個(gè)額外的< div>并將其用作塊級(jí)元素,但這也會(huì)破壞默認(rèn)的單元格增長(zhǎng)行為).

table

{

width: 100%;

min-height: 80px;

float: left;

}

dd {

position: absolute;

margin-top: -1em;

}

dd:before {

float: left;

content: "";

width: 100%;

margin: 0.5em;

}

td {

position: relative;

display: block;

border-top: 1px dashed lightblue; /* this line is for demonstration purposes only */

}

An introductory sentence as a text node. A further sentence as a paragraph.

An introductory sentence as a paragraph. A further sentence as a paragraph.

總結(jié)

以上是生活随笔為你收集整理的html分块时边距的设置,html – 文本节点后第一个块的边距(垂直空间)？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。