Html и CSS margin работает странно (я новичок)
В общем, решил заняться изучением Html и CSS.
social.html
<body>
<link rel = 'stylesheet' href = 'test.css'></link>
<div class = 'bottom_zone' border = 10px ></div>
<div class = 'ds' data-title ='Discord канал' onclick = "window.location.href = ''" aria-label = 'Дискорд'
alt = 'Дискорд'></div>
</body> test.css
body {
background-image: image-set('https://catherineasquithgallery.com/uploads/posts/2023-01/1674290811_catherineasquithgallery-com-p-serii-neonovii-fon-foto-57.jpg');
background-size: cover;
overflow-y: hidden;
overflow-x: hidden;
}
.bottom_zone {
width: 1010vw;
height: 120px;
background-color: rgb(0, 0, 0);
border-top: 1px solid rgba(198, 0, 238);
position: absolute;
top: 570px;
margin-left: 0px;
padding-left: 0px;
}
.ds {
background-image: image-set('https://i.pinimg.com/originals/76/70/bc/7670bc299ff7f72f661299f03c3d29d2.jpg');
background-size: cover;
cursor: pointer;
border-radius: 20%;
border: 2px solid rgba(198, 0, 238);
height: 65px;
width: 65px;
position: sticky;
top: 580px;
left: 1230px;
scroll-behavior: smooth;
}
.ds:hover {
filter: brightness(80%);
transition: 0.5s;
}
.ds::after {
content: attr(data-title); /* Выводим текст */
position: absolute; /* Абсолютное позиционирование */
left: 0; right: 0; bottom: 0.01px; /* Положение подсказки */
z-index: 1; /* Отображаем подсказку поверх других элементов */
background: rgba(198, 0, 238, 1); /* Полупрозрачный цвет фона */
color: #fff; /* Цвет текста */
text-align: center; /* Выравнивание текста по центру */
font-family: Arial, sans-serif; /* Гарнитура шрифта */
font-size: 9px; /* Размер текста подсказки */
padding: 0.1px 9px; /* Поля */
opacity: 0;
}
.ds:hover::after {
opacity: 1;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
margin-bottom: 20%; // Вот эта строка вызывает вопрос
} В общем, по сути margin должен скруглять углы блока, однако в моём случае, при наведении на блок(с иконкой дискорда) он медленно выкатывает скрытый блок на некую высоту и уменьшает размер скрытого блока.
1 фото. с margin-bottom: 20%;
фото без него
по сути margin должен скруглять углы блока
Углы скругляет border-radius. Margin это отступы, и их желательно в процентах не писать.
Ты скинул много кода и мало информации о проблеме. Нормально опиши, как есть и как надо, сейчас непонятно, что ты хочешь
class = 'ds'
не ставь пробелы, когда пишешь атрибуты в html, class="ds"
И подключать стили нужно в head, а не в body
border = 10px - такого атрибута не существует, особенно без кавычек
alt задается только у картинок, которые вставляются через тег <img>
спроси у чат гпт