Изучение CSS, проблемы с вертикальными границами

Question

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

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

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

article {
   float: right;
   width: 52%;
   background-color: peachpuff;
}
article h2 {
   border-left: 3px solid red;
   }
article h3 {
   border-left: 3px solid red;
   }
article p {
   border-left: 3px solid red;
   }
aside {
   float: left;
   width: 38%
}

Однако, он все еще оставляетразделение между каждым элементом.Я знаю, что это должно быть что-то простое, так как это простое форматирование, но, как я уже сказал, я начинающий.Заранее спасибо всем за помощь!

Answer 1

Если первое предложение парней не работает, то убедитесь, что все ваши теги <p>,<h1>,<h2> не имеют полей - они всегда есть по умолчанию.Если это так, но вам все еще нужно определенное расстояние между ними, используйте вместо этого отступы для каждого отдельного элемента - граница элемента не следует вдоль его поля.

Answer 2

Полагаю, это ваша страница ... Не стоит пытаться объединить несколько границ, чтобы сделать одну длинную.Вероятно, есть более простой способ сделать это.т.е. обернуть все это в другой div, который имеет элемент границы.Для справки, хотя этот пробел является автоматической маржи <h> теги есть.Вы могли бы сделать margin:0; для всех этих элементов, но это более хакерский способ сделать это.(Однако отступы добавляют к нему границу)

Вы всегда можете щелкнуть правой кнопкой мыши «Проверить» все, что вы хотите исследовать.Познакомьтесь с инспектором, потому что это хорошая посылка для разработки HTML / CSS.

.article {
   float: right;
   width: 52%;
   background-color: peachpuff;
}

.contentBorder{
   border-left: 3px solid red;
}

.aside {
   float: left;
   width: 38%
}

<div class="aside">
  here is my side content
</div>
<div class="article">
  <div class="contentBorder">
    <h2>My Header 2</h2>
    <h3>My Header 3</h3>  
    <p>Hello here is my content</p>
  </div>
</div>