Как лучше задать размер элемента, + как сделать треугольник в виде плеера?

Question

[jjsso]

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

Еще , я не могу понять как сделать треугольник в виде плеера

<div class="works__block">
           <div class="circle__inner">
            <a href="" class="player__button">
           <div class="circle">
            <div class="player__circle">
              <div class="player">

              </div>
            </div>
           </div>
           </a>
           </div>
          </div>
           <div class="works__card">
            <p class="works__subtitle">We provide design and build <br>
for commercial building, <br> 
interior and furniture to improve <br> 
the better life. </p>
           </div>

.works__block {
 background-image: url('./images/work-image.png');
 background-repeat: no-repeat;
 width: 1063px;
 height: 350px;

}

.works__card {
 width: 549px;
 height: 350px;
 background-color: #CCF0E6;
 margin-top: -350px;
 margin-right: -20px;
 float:right;

border-radius: 0px 10px 10px 0px;

}


.circle {
 width: 128px;
 height: 128px;
 background-color: #FFFFFF66;
 border-radius: 65px;
 display: flex;
 justify-content: center;
 align-items: center;
}
.player__circle {
 width: 100px;
 height: 100px;
 background-color: #FFFFFF;
 border-radius: 65px;
}
.player {
}


.circle__inner {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

Comments

[Ankhena]

Я не понимаю как правильно задать ширину как на макете: паддингами или шириной высотой?

Отличное начала при отсутствии самого макета. Надёжно.

треугольник в виде плеера

Может кнопку плеера в виде треугольника?
Гуглится по фигуры на CSS. Делается примерно десятком разных способов.
Самый простой - экспортировать треугольник из макета в svg.

Это очень странная конструкция

<div class="circle__inner">
            <a href="" class="player__button">
           <div class="circle">
            <div class="player__circle">
              <div class="player">

              </div>
            </div>
           </div>
           </a>
           </div>
          </div>

Кнопка плеера делается тегом button и кроме доступно скрытого текста типа "запустить" там внутри ничего не должно быть. Всё остальное стилями.
Может быть не кнопка, а ссылка, которая переведет пользователя куда-то, если отвалится js и что там будет управлять кнопкой.

И основная тема: паддингами или шириной высотой?
1. Для блоков с неизвестным содержимым высоту не задают. Точнее задают очень редко, когда готовы к включению полосы прокрутки при переполнении.
2. Что делает width - ну тут вроде понятно, но нужно знать про box-sizing и нюансы его значений.
3. padding - отступ между краем элемента и содержимым.

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

[jjsso]

Ankhena, за решение про плеер, спасибо, помогло))
с шириной и высотой уже почти сам разобрался, постараюсь сам покопаться и понять

[ProjectSoft]

jjsso, aspect-ratio. Задаёте только ширину, высоту при этом задавать не обязательно. И привести border-radius в порядок

.circle {
	align-items: center;
	aspect-ratio: 1 / 1;
	background-color: #FFFFFF66;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	width: 128px;
}

Если нужен padding, то задаёте. Отображение не изменится.
.player__circle, .player Не вижу необходимости стилизовать без макета. Всё зависит от того, что именно будет использоваться для отображения кнопки.

[Андрей]

для падингов, что бы не меняло ширину

*{
box-sizing:border-box;
}