Почему не применяются падинги?

Question

Fasolll @Fasolll

HTML
CSS

Почему не применяются падинги?

тег р, текст переносится на низ, хоть падинги как в дизайне. с фотографией тоже самое делала, но она правильно стоит

Вопрос задан более года назад
127 просмотров

7 комментариев

Подписаться 1 Простой 7 комментариев

Kentavr16 @Kentavr16

для начала - чего ты хочешь добиться?

Написано более года назад
Fasolll @Fasolll Автор вопроса

Kentavr16, поставить ник возле иконки инстаграма

Написано более года назад
Ivan Ustûžanin @IvanU7n

Fasolll, если так, то зачем такие большие паддинги?

в общем мне мало контекста, чтобы понять что не так

Написано более года назад
Fasolll @Fasolll Автор вопроса

IvanU7n, паддинги по дизайну делала, могу скинуть все что нужно для понимания

Написано более года назад
Ivan Ustûžanin @IvanU7n

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

либо как вариант сделать минимальный пример где-нить типа codepen.io

Написано более года назад

Fasolll @Fasolll Автор вопроса

IvanU7n,

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/styles.css" />
    <title>Social</title>
  </head>
  <body>
    <div class="inst">
      <a
        class="a1"
        href="https://www.instagram.com/zjedn.oczeni?utm_source=ig_web_button_share_sheet&igsh=OGQ5ZDc2ODk2ZA=="
      >
        <img class="inst-foto" src="img/inst.png" alt="instagram" />
        <p class="inst-txt">@zjedn.oczeni</p>
      </a>
    </div>
  </body>
</html>

html,
body {
  margin: 0;
  height: 100%;
  font-family: "Montserrat", sans-serif;
  background: #d9d9d9;
  width: 1360px;
  height: 768px;
}

.inst-foto {
  width: 105px;
  height: 105px;
  padding: 368px 176px 887px 487px;
}

.inst-txt {
  color: #575757;
  font-family: Inter;
  font-size: 64px;
  font-weight: 400;
  padding-top: 190px;
  padding-left: 495px;
  padding-bottom: 502px;
  padding-right: 410px;
}

программирую только недавно сама, многого не знаю

Написано более года назад

Ankhena @Ankhena Куратор тега CSS
<a class="social-link" href="https://www.instagram.com/zjedn.oczeni?utm_source=ig_web_button_share_sheet&igsh=OGQ5ZDc2ODk2ZA==" aria-label="Наш аккаунт в Инстаграме"> @zjedn.oczeni </a>

.social-link { display: flex; column-gap: 1em; /* ваш отступ */ } .social-link { content: ""; flex-shrink: 0; display: inline-block; width: 1em; /* ваши размеры */ aspect-ratio: 1; background: url("../img/inst.png") no-repeat center/ contain; /* путь к картинке скорректируйте и в идеале найти картинку в svg */ }

Как-то так.
Без div, p и прочего барахла.

Иконка инстаграма - не контентное изображение, а украшение ссылки. Его лучше убирать в стили. Я показала один из вариантов как именно.

Почему не применяются падинги?

Судя по скрину они как раз таки применяются. И именно из-за них такая дичь и происходит.
Если пока не очень хорошо пользуетесь инструментами разработчика, я рекомендую обводить элементы рамочками (outline и отрицательный outline-offset). Удобно толстенькими разноцветными и полупрозрачными.
Написано более года назад

Помогут разобраться в теме Все курсы

Яндекс Практикум

Профессиональная вёрстка на HTML и CSS

3 месяца

Далее
Stepik

Основы HTML и CSS

2 недели

Далее
OTUS

HTML/CSS

3 месяца

Далее

Решения вопроса 1

Комментировать

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

CSS

Простой
Как сверстать кастомную пунктирную обводку у блока?
- 1 подписчик
- 17 нояб.
- 156 просмотров
2

ответа
CSS

Простой
Можно ли использовать функцию calc() в медиазапросах?
- 1 подписчик
- 13 нояб.
- 184 просмотра
1

ответ
HTML

+1 ещё

Простой
Как реализовать форму ввода как в веб-версии chatGPT?
- 1 подписчик
- 13 нояб.
- 167 просмотров
0

ответов
CSS

+1 ещё

Простой
Как оптимизировать svg картинку?
- 1 подписчик
- 11 нояб.
- 151 просмотр
1

ответ
CSS

Средний
Как найти стили в шаблоне Битрикс?
- 1 подписчик
- 06 нояб.
- 165 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Как сделать горизонтальный скролл стрелками?
- 1 подписчик
- 05 нояб.
- 237 просмотров
1

ответ
PHP

+2 ещё

Простой
Создание элемента с необычной формой и прозрачным фоном и рамкой?
- 1 подписчик
- 03 нояб.
- 185 просмотров
0

ответов
CSS

Простой
Как выстроить 4 блока, чтобы расстояния были одинаковые на флексах?
- 1 подписчик
- 31 окт.
- 143 просмотра
2

ответа
CSS

Простой
Как правильно задать размеры блоков?
- 1 подписчик
- 31 окт.
- 106 просмотров
1

ответ
HTML

Простой
При клике на кастомную кнопку “Скачать” не происходит переход, хотя JS-обработчик отрабатывает. Как решить?
- 1 подписчик
- 29 окт.
- 186 просмотров
0

ответов
Показать ещё Загружается…

PHP-разработчик

FoodSoul • Калининград

от 180 000 до 250 000 ₽

Специалист технической поддержки (чат)

WebSoft

от 50 000 до 70 000 ₽

Frontend Developer (React + Node.js)

Alfabet Service

от 1 000 до 2 000 $

для начала - чего ты хочешь добиться?
Kentavr16, поставить ник возле иконки инстаграма
Fasolll, если так, то зачем такие большие паддинги?

в общем мне мало контекста, чтобы понять что не так
IvanU7n, паддинги по дизайну делала, могу скинуть все что нужно для понимания
Fasolll, в вопрос желательно поместить больше кода (как разметки, так и стилей), ну а картинкой можно как должно выглядеть

либо как вариант сделать минимальный пример где-нить типа codepen.io
IvanU7n,
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="css/styles.css" /> <title>Social</title> </head> <body> <div class="inst"> <a class="a1" href="https://www.instagram.com/zjedn.oczeni?utm_source=ig_web_button_share_sheet&igsh=OGQ5ZDc2ODk2ZA==" > <img class="inst-foto" src="img/inst.png" alt="instagram" /> <p class="inst-txt">@zjedn.oczeni</p> </a> </div> </body> </html>

html, body { margin: 0; height: 100%; font-family: "Montserrat", sans-serif; background: #d9d9d9; width: 1360px; height: 768px; } .inst-foto { width: 105px; height: 105px; padding: 368px 176px 887px 487px; } .inst-txt { color: #575757; font-family: Inter; font-size: 64px; font-weight: 400; padding-top: 190px; padding-left: 495px; padding-bottom: 502px; padding-right: 410px; }

программирую только недавно сама, многого не знаю
<a class="social-link" href="https://www.instagram.com/zjedn.oczeni?utm_source=ig_web_button_share_sheet&igsh=OGQ5ZDc2ODk2ZA==" aria-label="Наш аккаунт в Инстаграме"> @zjedn.oczeni </a>

.social-link { display: flex; column-gap: 1em; /* ваш отступ */ } .social-link { content: ""; flex-shrink: 0; display: inline-block; width: 1em; /* ваши размеры */ aspect-ratio: 1; background: url("../img/inst.png") no-repeat center/ contain; /* путь к картинке скорректируйте и в идеале найти картинку в svg */ }

Как-то так.
Без div, p и прочего барахла.

Иконка инстаграма - не контентное изображение, а украшение ссылки. Его лучше убирать в стили. Я показала один из вариантов как именно.

Почему не применяются падинги?

Судя по скрину они как раз таки применяются. И именно из-за них такая дичь и происходит.
Если пока не очень хорошо пользуетесь инструментами разработчика, я рекомендую обводить элементы рамочками (outline и отрицательный outline-offset). Удобно толстенькими разноцветными и полупрозрачными.

Answer 1 · 2024-01-03 21:01:46

тег <p> по умолчанию имеет display: block, если заменить его на обычный <span> то он не будет начинаться с новой строки

однако отступы какие-то слишком гигантские, и возможно применять их нужно к тегу <a> или <div>

Почему не применяются падинги?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт