отступ текста не работает в HTML5 - PullRequest
Новая
       5

отступ текста не работает в HTML5

0 голосов
/ 26 мая 2018

Есть два столбца, я поставил text-indent, но он влияет только на левый столбец, оба столбца находятся внутри одного класса, но работает только левая сторона, почему?Правые столбцы должны выглядеть так же, как левый столбец, и в чем разница между .newspaper, span {} и
.newspaper span {}? 

 <!DOCTYPE html>
<html>
<head>
<style>
body{
   width:600px;
}
.newspaper {
   text-align: justify;
   -webkit-column-count: 2; /* Chrome, Safari, Opera */
   -moz-column-count: 2; /* Firefox */
   column-count: 2;
   font-family: "Times New Roman", Times, serif;
}
.newspaper,
span{
   text-indent: 2em;
}
</style>
</head>
<body>

<div class="newspaper">
   <span>yuyuy yuyuy yuyuy yuy</span> amet, consectetuer adipiscing elit. 
feeeeeeeeeeeeeeee
</br>
   <span>yuyuy yuyuy yuyuy yuy</span> amet, consectetuer adipiscing elit. 
feeeeeeeeeeeeeeee </div>

</body>
</html>

Ответы [ 2 ]

0 голосов
/ 26 мая 2018

text-indent свойство предназначено для блочных контейнеров, как указано в спецификациях

Кроме того, еще одно примечание, специфичное для вас:

Поскольку текст-indent свойство влияет только на «первую отформатированную строку», строка после принудительного разрыва не будет иметь отступ.

<span> не считается элементом уровня блока, см. это обсуждение здесь

По умолчанию элементы уровня блока форматируются иначе, чем встроенные элементы.Как правило, элементы уровня блока начинаются с новой строки, а встроенные элементы - нет.

0 голосов
/ 26 мая 2018

1-й вопрос:

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

.newspaper span {
    padding-left: 2em;
}

2-й вопрос:

Разница между .newspaper, span{} и .newspaper span{} в том, что ваш стильвнутри .newspaper, span{} применяется как к классу .newspaper, так и к ALL spans с запятой, равной значению ... 

span{
   text-indent:2em;
}

... в вашей таблице стилей,

Где, как и без запятой, вы просто выбираете все spans в этом классе.

...