我不確定你是否會認(rèn)為這是對你的問題的完整答案,因為我知道你正在使用< td>在您的示例中,< td>之間存在一個差異.和< dd>或者< li>元素是< td>的事實.在不破壞< table>的情況下,元素不能與其周圍元素相抵消具體行為.但至少我可以回答你的第三個問題的一部分：

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

事實并非如此,你總是可以渲染一個浮動：前面的偽元素,寬度為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.

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

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

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

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

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

這是一個概念證明：

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.

這個“人工邊緣”是一個左浮動的塊框(在偽元素的情況下是匿名塊框)在其包含元素內(nèi).如果他們需要,所有其他的塊盒都將向下移動(因為它們是根據(jù)W3C floating spec假設(shè)浮動盒子沒有為它們留下任何空間),這只發(fā)生在浮動盒開始超出它的邊緣時隱藏,并且它不會在這個特定問題的解決方案中發(fā)生,因為我特意將人工邊緣設(shè)置為與< p>的實際邊緣一樣高.

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

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.

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

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

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

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

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)為回答第二個問題,至少對于< dd>和< li>元素,甚至允許前一個文本節(jié)點中的內(nèi)聯(lián)元素.

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

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 – 文本节点后第一个块的边距(垂直空间)？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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