Маржа не применяется к многострочному тексту во всем классе

Question

Это HTML-код

.sectionToc {
  line-height: 1.8;
  text-shadow: 0px 0px 4px rgba(255, 248, 248, 0.76);
  color: #095D18;
  font-size: 20px;
}

.sectionToc a {
  text-shadow: 0px 0px 5px rgba(255, 248, 248, 0.76);
  color: #0D6A48;
  font-size: 20px;
  text-decoration: none;
}

.subsectionToc {
  text-shadow: 0px 0px 5px rgba(255, 248, 248, 0.76);
  color: #0D6A48;
  font-size: 20px;
  text-decoration: none;
  margin-left: 20px;
  line-height: 1.8;
}

.subsectionToc a {
  text-shadow: 0px 0px 5px rgba(255, 248, 248, 0.76);
  color: #169A9A;
  font-size: 19.5px;
  text-decoration: none;
}

<br /><span class="sectionToc">25 <a 
    href="#x1-2600025" id="QQ2-1-26">URLs,Hyperlinks and Bookmarks</a></span>
<br /><span class="sectionToc">26 <a 
    href="#x1-2700026" id="QQ2-1-27">Header and Footer</a></span>
<br />&#x00A0;<span class="subsectionToc">26.1 <a 
    href="#x1-2800026.1" id="QQ2-1-28">Header and Footer for all pages</a></span>
<br />&#x00A0;<span class="subsectionToc">26.2 <a 
    href="#x1-2900026.2" id="QQ2-1-29">Customising Headers and Footers for different pages</a></span>
<br /><span class="sectionToc">

Проблема в том, что при изменении размера окна (например, на мобильном устройстве) вторая строка в подразделе не имеет поля слева. Например, попробуйте изменить размер окна и посмотреть, как отображается подраздел 26.2. Вторая строка не имеет никакого запаса. Он не наследует маржу от своего родительского класса.

Answer 1

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

Измените все span на div, если вы хотите, чтобы они были выровнены с одинаковым полем. А также используйте отрицательный margin-top, чтобы выглядеть красиво.

Вот JSFiddle и код ниже:

.sectionToc {
  line-height: 1.8;
  text-shadow: 0px 0px 4px rgba(255, 248, 248, 0.76);
  color: #095D18;
  font-size: 20px;
  margin-top: -10px;
}

.sectionToc a {
  text-shadow: 0px 0px 5px rgba(255, 248, 248, 0.76);
  color: #0D6A48;
  font-size: 20px;
  text-decoration: none;
}

.subsectionToc {
  text-shadow: 0px 0px 5px rgba(255, 248, 248, 0.76);
  color: #0D6A48;
  font-size: 20px;
  text-decoration: none;
  margin-left: 20px;
  line-height: 1.8;
  margin-top: -30px;
}

.subsectionToc a {
  text-shadow: 0px 0px 5px rgba(255, 248, 248, 0.76);
  color: #169A9A;
  font-size: 19.5px;
  text-decoration: none;
}

<br />
<div class="sectionToc">25 <a href="#x1-2600025" id="QQ2-1-26">URLs,Hyperlinks and Bookmarks</a>
</div>
<br />
<div class="sectionToc">26 <a href="#x1-2700026" id="QQ2-1-27">Header and Footer</a>
</div>
<br />&#x00A0;
<div class="subsectionToc">26.1 <a href="#x1-2800026.1" id="QQ2-1-28">Header and Footer for all pages</a>
</div>
<br />&#x00A0;
<div class="subsectionToc">26.2 <a href="#x1-2900026.2" id="QQ2-1-29">Customising Headers and Footers for different pages</a>
</div>
<br />

Answer 2

Проблема в том, что .subsectionToc охватывает несколько строк, тогда ширина слишком узкая. Вам нужен элемент с display:block вместо inline. <div> будет делать. Тогда вам также не понадобятся <br> s между ними.

.sectionToc {
  line-height: 1.8;
  text-shadow: 0px 0px 4px rgba(255, 248, 248, 0.76);
  color: #095D18;
  font-size: 20px;
}

.sectionToc a {
  text-shadow: 0px 0px 5px rgba(255, 248, 248, 0.76);
  color: #0D6A48;
  font-size: 20px;
  text-decoration: none;
}

.subsectionToc {
  text-shadow: 0px 0px 5px rgba(255, 248, 248, 0.76);
  color: #0D6A48;
  font-size: 20px;
  text-decoration: none;
  margin-left: 20px;
  line-height: 1.8;
}

.subsectionToc a {
  text-shadow: 0px 0px 5px rgba(255, 248, 248, 0.76);
  color: #169A9A;
  font-size: 19.5px;
  text-decoration: none;
}

<div class="sectionToc">
  25 <a href="#x1-2600025" id="QQ2-1-26">URLs,Hyperlinks and Bookmarks</a>
</div>
<div class="sectionToc">
  26 <a href="#x1-2700026" id="QQ2-1-27">Header and Footer</a>
</div>
<div class="subsectionToc">
  26.1 <a href="#x1-2800026.1" id="QQ2-1-28">Header and Footer for all pages</a>
</div>
<div class="subsectionToc">
  26.2 <a href="#x1-2900026.2" id="QQ2-1-29">Customising Headers and Footers for different pages</a>
</div>
<div class="sectionToc">

Кроме того, margin не является унаследованным свойством.