Подтвердить что ты не робот

Маржа (вертикальное пространство) первого блока после текста node?

Первый вопрос:

Внутри блока, такого как <dd> или <td> или <li>, правильно ли я говорю, что одно или оба из следующих были бы нормальными и правильными?

<td>
  An introductory sentence as a text node.
  <p>A further sentence as a paragraph.</p>
</td>

и/или

<td>
  <p>An introductory sentence as a paragraph.</p>
  <p>A further sentence as a paragraph.</p>
</td>

Второй вопрос:

Предполагая, что так, какой CSS я могу использовать, чтобы гарантировать, что в обоих случаях есть разница между двумя предложениями, но не до первого предложения?

Моя проблема в том, что если я сделаю что-то вроде...

td > p { margin-top: 1em; }

... это правильно работает, когда первое предложение представляет собой текст node, но он помещает нежелательное поле между первым предложением и содержащим <td>, когда первое предложение находится внутри абзаца.

Я хотел бы, чтобы решение работало, даже когда первое предложение содержит встроенный элемент, например <strong> или <a href="...">.


В итоге CSS должен создать для обоих двух примеров HTML один и тот же макет:

-- top of <td> here
-- no margin here
-- first sentence here (whether it a text node and/or inside a <p>)
-- margin here, between the two sentences
-- second sentence here inside a <p>

Третий вопрос:

Если верно, что невозможно определить правило CSS, которое создает одинаковый формат для обоих видов HTML, то я предполагаю, что авторы веб-сайтов должны быть осторожны, чтобы всегда использовать только одну разметку HTML?

Если это так, что вы считаете нормальным?

  • Никогда не начинайте блок с другого блока, всегда начинайте его с текста node (тогда вы можете использовать правило CSS, в котором говорится, что первый блок должен иметь margin-top); например, выполните следующее:

    <td>
      An introductory sentence as a text node.
      <p>A further sentence as a paragraph.</p>
    </td>
    

    Это не сработает, если, например, первое, что в блоке должно быть списком, - список имел бы нежелательный margin-top:

    <td>
      <ul>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </td>
    
  • Никогда не запускайте блок с текстом node, всегда начинайте его с блока (тогда вы можете использовать правило CSS, в котором говорится, что первый блок не должен иметь margin-top); например, выполните следующее:

    <td>
      <p>An introductory sentence as a paragraph.</p>
      <p>A further sentence as a paragraph.</p>
    </td>
    

    Это больше разметки, чем я ожидал. Я думаю, что я привык видеть разметку типа <li>List item</li>, а не <li><p>List item</p></li>

  • Не стандартизируйте, используйте либо, но добавляйте дополнительные атрибуты class= или style= к блокам по мере необходимости, чтобы добавить или удалить верхнее поле на основе case-case.

4b9b3361

Ответ 1

Я не уверен, если вы считаете, что это полный ответ на ваш вопрос, поскольку я знаю, что вы используете <td> в своих примерах и одно различие между <td> и <dd> или Элементы <li> - это то, что элементы <td> не могут быть смещены относительно окружающих их элементов, не нарушая их специфического поведения <table>. Но, по крайней мере, я могу ответить на часть вашего третьего вопроса:

Если это правда, что невозможно определить правило CSS, которое создает тот же формат для обоих видов HTML...

Это не так, вы всегда можете отобразить плавающий псевдо-элемент :before с набором width от 100%; и установить половину margin элементов sibling <p> на нем.

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

dd:before {
  float: left;
  content: "";
  width: 100%;
  margin: 0.5em;
}
<dd>
  An introductory sentence as a text node.
  <p>A further sentence as a paragraph.</p>
</dd>
<dd>
  <p>An introductory sentence as a paragraph.</p>
  <p>A further sentence as a paragraph.</p>
</dd>

Ответ 2

Первый ответ:

Это разрешено для текущей спецификации HTML (HTML5). Тем не менее, Strict вкусов предыдущего поколения HTML (HTML4/XHTML1) требовал, чтобы определенные элементы (например, body или form) содержали только блоки, а не голой текст или текстовые элементы уровня (теперь все вместе называемые "фразинг-контент" ), Новая спецификация должна была смягчить это ограничение, чтобы соответствовать реальности, но я считаю, что это имело обоснование, прежде всего из-за следующего момента...

Второй ответ:

Как сказал в своем ответе Mathijs Flietstra, любой пробег текста, помещенный в тот же контейнер, что и элементы уровня блока без какой-либо обертки display:block, становится анонимным блочным блоком (поскольку блок CSS может содержать либо встроенные ящики, либо блок-блоки, но не их обоих). Эти анонимные поля ведут себя как обычные блок-блоки (думаю, div), но вы не можете установить их как свойство CSS напрямую, они получают только наследуемые свойства из контейнера. Таким образом, нет никакого способа установить для них ни заполнения, ни границы, ни границы, ни фона. Все существующие селектор CSS просто не учитывают их (кроме :empty псевдокласс, но в этом случае это не очень полезно).

Да, иногда вы можете найти хак, чтобы обойти это ограничение. Более того, современные механизмы CSS, такие как Grid Layout, обеспечивают способы, например, иметь равномерный интервал между сыровнями контейнера независимо от их типа:

div > * {
  margin:0;
}
div{
  display:grid;
  grid-columns: 1fr;
  grid-row-gap: 1em;
  border:1px solid black;
}
<div>
  <p>An introductory sentence as a paragraph.</p>
  <p>A further sentence as a paragraph.</p>
  <p>Another further sentence as a paragraph.</p>
</div>

<div>
  An introductory sentence as a text node.
  <p> A further sentence as a paragraph.</p>
  <address>Another further sentence as an <code>address</code> element.</address>
</div>

Ответ 3

Первый ответ:

Да. <dd> и <dt>, оба принимают содержимое потока. Это означает, что либо абзац абзаца, либо необработанный текст вполне приемлемы. Пункты сами по себе не нарушают поток, поэтому вы можете иметь столько или меньше, сколько хотите.

Второй ответ:

Вы использовали бы :first-of-type псевдоселектор:

dd {
  border: 1px solid black;
  padding: 5px;
}

dd > p:first-of-type {
  margin-top: 5em;
}
<dd>
  <p>Sample text</p>
  <p>Sample text</p>
</dd>

Ответ 4

ОБНОВЛЕНО

1) yes

2) no, , если вы не допустили, чтобы текст node переполнял ширину одной строки, сохраняя краткое сообщение первой строки. не работает <br>.

ADD

"Свободный" плавающий (немаркированный) текст, похоже, не имеет селектора CSS, что делает невозможным выбор без использования Javascript. Я помню, что мне это нужно. Назовите это пропуском W3C?

Единственная возможность, казалось, была селектором :empty, но, тем не менее, мне не удалось создать некоторую логику CSS, которая захватывает текст node, задерживаясь перед помеченным элементом. Так что использование выглядит в лучшем случае мрачным (предполагая, что я знаю свою логику...)

конец добавить

В других случаях вы можете удалить HTML по умолчанию top-margin бесплатно для нескольких элементов (см. первую строку кода CSS) и добавить td>:not(:first-child) { margin-top: 1rem }, чтобы вторая строка была верхним.

p,.or-any-element-with-HTML-default-margins {
    margin-top: 0;
}
td>:not(:first-child) {
    margin-top: 1rem;
}
 
   /* demo, ignore */
   table,tr,td {
    border: 1px dotted silver;
    border-collapse: collapse;
}
.wrapper {
    max-width: 20rem;
    margin: 0 auto;
}
h2 {
    text-align: center;
}
<div class="wrapper">
    <h2>some table</h2>
    <table>
        <tr>
            <td>text node
                <p><strong>paragraph</strong> paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph </p>
            </td>
        </tr>
          <tr>
            <td>
                <p><strong>1st</strong> paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph </p>
                <p><strong>2nd</strong> paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph </p>
            </td>
        </tr>
        <tr>
            <td>
                <p><strong>paragraph</strong> paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph </p>
                Ordered List (<strong>text node</strong>)
                <ol>
                    <li>List item 1</li>
                    <li>List item 2</li>
                </ol>
            </td>
        </tr>
        <tr>
            <td>
                <p><strong>paragraph</strong> paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph </p>
                Unordered List (<strong>text node</strong>)
                <ul>
                    <li>List item 1</li>
                    <li>List item 2</li>
                </ul>
            </td>
        </tr>
    </table>
</div>

Ответ 5

  • Да, это приемлемо. Вы всегда можете проверить, действительно ли ваш HTML действителен, используя службу проверки разметки W3C (https://validator.w3.org/).
  • Я смог выполнить это, используя :last-child. См. Демонстрацию ниже. Вы даже можете дать <td> узкую ширину для переноса строки и увидеть, что она все еще работает.

p {
  margin: 0;
}

td {
  border: 1px solid black;
}

td > :last-child {
  margin-top: 10px;
}
<table>
  <tbody>
    <tr>
      <td>
        An introductory sentence as a text node.
        <p>A further sentence as a paragraph.</p>
      </td>
      <td>
        <p>An introductory sentence as a paragraph.</p>
        <p>A further sentence as a paragraph.</p>
      </td>
    </tr>
  </tbody>
</table>

Ответ 6

Добавление класса для элемента, у которого должно быть поле:

  • Назначить верхний край
  • Назначить высоту строки

Или используйте это, чтобы быть конкретным, как второй дочерний элемент:

td:nth-child(2) {
   top-margin: 2px;
}

Ответ 7

Первый ответ: его действительный

Второй ответ:

Нельзя различать эти два элемента <p> относительно родительского (<div>)

Случай1: WithText

<div>
  Hello
  <p> hi</p>
</div>

Вопрос 2: WithoutText

<div>
  <p>hi</p>
</div>

В обоих случаях <p> является первым потомком, последним и т.д. Любой селектор, который будет применяться к WithText <p>, также применим к WithoutText <p>.

Но все же я пробовал...

Когда: Заказ не имеет значения (обратный порядок), а размер контейнера исправить

div p{
  margin:0 0 20px 0;
}
div{
  height:150px;
  display:flex;
  justify-content: end;
  flex-direction: column-reverse;
  border:1px solid black;
}
<div>
  <p>An introductory sentence as a paragraph.</p>
  <p>A further sentence as a paragraph.</p>
  <p> An another further sentence as a paragraph.</p>
</div>

<div>
  An introductory sentence as a text node.
      <p> A further sentence as a paragraph.</p>
      <p> An another further sentence as a paragraph.</p>
</div>