margin-bottom: 100px;

Question

Почему не работает margin-bottom: 100px; я уже все перепробовал, а поля все равно заходят друг на друга и никак не разделяются:

.hu {
  color: green;
  font-size: 100px;
  background-color: #d1d1d1;
  border: 6px dashed #323232;
  margin-left:  300px;
box-shadow: -13px 13px 20px 5px black;

}
.an {
  color: red;
  font-size: 60px;
  border: 2px solid #323232;
  background-color: black;

}
.p {
    color: blue;
    background-color: #eda1a1;
}
.l {
    color: #ff9d00;
    background-color: red;
}
a {

  padding: 35px;
margin-bottom: 100px;
     margin: 100px;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <link href="сисс.css" rel="stylesheet" type="text/css"/>
     <meta charset="utf-8">
    <title>проба</title>
    <link rel="shortcut icon" href="https://free-png.ru/wp-content/uploads/2020/04/VK_Blue_Logo_t.png">
    <meta name="description" content="ВКонтакте – универсальное средство для общения и поиска друзей и одноклассников, которым ежедневно пользуются десятки миллионов человек. Мы хотим, чтобы друзья, однокурсники, одноклассники, соседи и коллеги всегда оставались в контакте.">



  </head>


  <body>

<a class="hu" href="https://vk.com/valerochka3"> человек </a>? <br/>
<a class="an l" href="https://vk.com/rast1505"> животное </a>? <br/>
<a class="an f" href="https://vk.com/rast1505"> животное </a>? <br/>
<a class="an p" href="https://vk.com/rast1505"> животное </a>? <br/>



  </body>
</html>

Answer 1

ВАм нужно прописать так

a{display:block;}

Элемент <a href=""></a> является строчным, т.е. все ваши ссылки выстраиваются в дну линию или в строку. Вам нужно поменять его поведение на блочный. Блочный элемент имеет такие свойства:

Занимает полностью всю ширину окна.
Все блочные элементы всегда располагаются один под другим в нормальном потоке

БЛОГ НА HUSL

margin-bottom: 100px;

Ответы (1 шт):