Расстояние между элементами

Question

Я полный новичок в CSS и HTML, и я создаю свою первую базовую страницу для обучения.

Теперь я хочу сделать интервал между двумя элементами без использования <br>.В настоящее время я использую это:

.formClear {
  clear:left;
  height:25px;
}

Это работает для пробелов, но вы это правильный способ сделать это?Будет ли высота линии работать лучше?

line-height: 20px; 

Каковы ваши предложения?Пожалуйста, помните, что я начинаю учиться:)

Спасибо!

Answer 1

Это зависит от того, что именно вы хотите достичь. Предположим, у вас есть эта структура:

<p style="width:400px;">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
</p>

Если вы хотите, чтобы расстояние между строками было больше, вы должны увеличить

line-height

Если вы хотите, чтобы пространство в конце было больше, вы должны увеличить

margin-bottom

Если вы хотите, чтобы пространство в конце было больше, но фон должен заполнить пространство (или границу вокруг пространства), используйте

padding-bottom

Конечно, есть также соответствующие значения для пробела сверху:

padding-top
margin-top

Некоторые примеры:

<p style="line-height: 30px; width: 300px; border: 1px solid black;">
     Space between single lines 
     Space between single lines
     Space between single lines
     Space between single lines
     Space between single lines
     Space between single lines
     Space between single lines
     Space between single lines
</p>
<p style="margin-bottom: 30px; width: 300px; border: 1px solid black;">
     Space at the bottom, outside of the border
     Space at the bottom, outside of the border
     Space at the bottom, outside of the border
     Space at the bottom, outside of the border
     Space at the bottom, outside of the border
     Space at the bottom, outside of the border
     Space at the bottom, outside of the border
     Space at the bottom, outside of the border
     Space at the bottom, outside of the border
</p>
<p style="padding-bottom: 30px; width: 300px; border: 1px solid black;">
     Space at the bottom, inside of the border
     Space at the bottom, inside of the border
     Space at the bottom, inside of the border
     Space at the bottom, inside of the border
     Space at the bottom, inside of the border
     Space at the bottom, inside of the border
     Space at the bottom, inside of the border
     Space at the bottom, inside of the border
     Space at the bottom, inside of the border
</p>

здесь вы можете увидеть этот код в действии: http://jsfiddle.net/ramsesoriginal/H7qxd/

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

здесь у вас есть небольшая схематическая демонстрация того, на что влияет значение:

                                   line-height
           content                 +
                                   |      padding-bottom
                  <----------------+      +
           content                        |    border-bottom
                                          |    +
                                          |    |
        +-------------+<------------------+    |       margin-bottom
                                               |       +
     +===================+ <-------------------+       |
                                                       |
  +-------------------------+ <------------------------+

Answer 2

Вам не нужно создавать элемент, такой как тег
или любой другой тег распорки. Что вам нужно сделать, так это применить стиль к элементу, который должен располагаться вокруг него.

Скажем, элемент, который вы хотите поместить вокруг, - это тег DIV, называемый "myelement".

<div class="myelement">
    I am content that needs spacing around it!
</div>

Это стиль, который вам нужно использовать.

 .myelement {
  clear:left;
  height:25px;
  margin: 20px;  // See below for explanation of this
 }

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

.myelement {
  clear:left;
  height:25px;
  margin-top:20px;
  margin-right:20px;
  margin-bottom:20px;
  margin-left:20px;
 }

Кроме того, избегайте использования свойства height: CSS, пока не узнаете, что делаете. При использовании высоты вы столкнетесь с некоторыми проблемами, с которыми сложнее разобраться как новичку.

Answer 3

Если вы хотите вертикальное расстояние между элементами, используйте margin .

Не добавляйте дополнительные элементы, если вам это не нужно.

Answer 4

Используйте поле для пробела вокруг элемента.

.box {
        margin: top right bottom left;
 }

.box {
        margin: 10px 5px 10px 5px;
}

Это добавляет пространство вне элемента.Таким образом, цвета фона, границы и т. Д. Не будут включены.

Если вы хотите добавить интервал в элемент, используйте вместо него отступы.Его можно вызвать так же, как указано выше.

Answer 5

Обычно мы используем поля на одном из элементов, а не на элементах-разделителях.