Прокладка для встроенных элементов

Я читаю книгу об основах CSS. В книге утверждается, что встроенный элемент имеет полные свойства заполнения, но не имеет свойств margin-top/button, только свойства margin-left/right.Прокладка для встроенных элементов

Мой первый вопрос: где я могу найти это в качестве официального заявления? Я нашел here, что если для параметра margin-top/bottom установлено значение «auto», тогда оно установлено на «0». Но разве это не значит, что «margin-top/botton не относится к встроенным элементам»?

Мой второй вопрос: действительно ли встроенный элемент действительно имеет полные свойства заполнения? Я попробовал следующий пример:

<!DOCTYPE html> 
<html> 

    <head>  
    </head> 

    <body> 

     <div style="margin: 20px; 
      border: solid 20px; 
      background: red;"> 
      <p style='margin:0'>test test test test test test test 
test test test test test test test test test test test 
test test test test test test 


<strong style="padding:20px;background-color:yellow">hello</strong> 


test test test test</p> 
     </div> 
      </body> 

</html>

Теперь это показывает, что обивка на самом деле работает так или иначе, но по какой-то причине обивка-топ и отступы дном не оказывает никакого влияния на окружающий текст. Почему это? Это упоминается где-нибудь в стандартах W3?

источник

2015-11-09 Adam

Вы спрашиваете о марже, но приводите пример заполнения? Ваш вопрос, в котором вы указываете «встроенный элемент, имеет полные свойства заполнения», и ваш пример показывает, что, каков ваш вопрос. – Leeish

@ Leeish, а также пример показывает, что заполнение работает только на 50%. Цвет фона применяется к padding-top, но padding-top не влияет на окружающий текст. Поэтому я утверждаю, что отступы работают не так, как ожидалось. – Adam

См. Мой ответ. Он добавляет дополнение к элементу 'strong'. Но встроенные элементы не имеют «высоты», как блок и элементы встроенного блока. Они не влияют на высоту их родителей, как элемент блока, поскольку «высота» встроенного элемента - это высота линии по 10.6.1, которую вы связали. – Leeish

Он утверждал в своей книге, что встроенный элемент имеет полные отступы свойство, но нет свойств Маржи-топа кнопки /, только маржинального левой/правого свойства.

Мой первый вопрос: где я могу найти это в качестве официального заявления?

Вы не будете, потому что это не совсем так. В box model говорится, что для края и верхнего края:

Эти свойства не влияют на незаменимые встроенные элементы.

Но «no effect» не означает, что свойств не существует. В частности, они существуют для целей наследования. Рассмотрим следующий пример:

p { border:1px solid red } 
 
i { vertical-align:top; } 
 
span { margin-top: 20px; margin-bottom: 20px; } 
 
b { display:inline-block; } 
 
.two { margin:inherit; }

<p><i>Hello</i> <span>World <b class="one">my good friend</b></span></p> 
 
<p><i>Hello</i> <span>World <b class="two">my good friend</b></span></p>

Мы можем видеть, что б элемент с классом «два» наследует верхний край и нижний свойства инлайн, незамещаемые элемент диапазона, и с тех пор б Элемент является встроенным блоком, край верхнего и нижнего уровня вызывает разницу в макете. Это было бы невозможно, если свойства margin-top и bottom не существовали на промежутке.

источник

2015-11-15 21:59:28 Alohci

, но по какой-то причине он не оказывает никакого влияния на окружающий текст

Попробуйте заменить margin для padding в strong элемента, добавив display:inline-block в strong стиль

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 
    <div style="margin: 20px; 
 
      border: solid 20px; 
 
      background: red;"> 
 
    <p style='margin:0'>test test test test test test test test test test test test test test test test test test test test test test test test 
 
     <strong style="margin:20px;background-color:yellow;display:inline-block;">hello</strong> 
 
     test test test test</p> 
 
    </div> 
 
</body> 
 
</html>

источник

2015-11-09 23:22:42 guest271314

Вы хотите доказать, что встроенный элемент не имеет margin-top/bottom? Потому что тогда я не вижу вашей точки, поскольку фоновый цвет применяется только к отступу, а не к марже. – Adam

@Adam Post намеревается применить элемент 'margin' к элементу' strong', где окружающий текст отображается под влиянием свойства margin, путем включения 'display: inline-block' в элемент' strong'. Если проверять элемент 'strong' без' inline-block', 'margin-top',' margin-bottom' по-прежнему применяется к элементу - с 'display' установленным' inline'. Хотя элемент не имеет 'inline-block' или' block' 'display', который будет визуально влиять на окружающий текст – guest271314

Мой первый вопрос: где я могу найти это как официальное заявление? Я нашел здесь, что если margin-top/bottom установлен на «auto», то устанавливается на «0». Но разве это не так, как сказать «margin-top/botton» не относится к встроенным элементам?

В 8.1 Box Model Spec (http://www.w3.org/TR/REC-CSS2/box.html#propdef-margin) «Запас край окружает край коробки. Если поле имеет ширину 0 (по высоте), то край поля таким же, как пограничный край.»

На странице, которую вы указали 10.6.1 «Свойство« высота »не применяется, но высота поля задается свойством« line-height ». Так как высота не применяется, то край края совпадает с краем границы.

Мой второй вопрос: действительно ли встроенный элемент действительно заполнен Свойства прокладки? Я попробовал следующий пример:

По той же причине, что и выше. «высота окна задается свойством« line-height ». Высота этого сильного элемента задается line-height, поскольку он не имеет высоты для ссылки в качестве блока или элемента встроенного блока. Я уверен, что если бы вы дали ему свойства встроенного блока, это было бы, так как блок имел высоту в модели.

источник

2015-11-09 23:32:23 Leeish

Спасибо. Тем не менее, я новичок в документации WC3 и, вероятно, поэтому не понимаю ваших выводов. Вот моя первая проблема: я вижу, что это сказано в 10.6.1 *** Если margin-top установлен на «auto», тогда он установлен в 0 ***. У меня такое чувство, что вы говорите *** Какой бы маркер не был назначен, он будет установлен в 0 ***, но я не нахожу этого утверждения. – Adam

Сразу после того, как «их вычисленное значение равно 0», оно говорит: «Свойство« высота »не применяется, но высота поля задается свойством« line-height ». Итак, следуйте за мной, если свойство «height» не применяется тогда к коробке модели в 8.1, которую я связал, тогда высота поля устанавливается только «высотой строки», по крайней мере, так я понимаю. – Leeish

Прокладка для встроенных элементов

ответ

Смежные вопросы