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

Question

Fasolll @Fasolll

HTML
CSS

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

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

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

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). Удобно толстенькими разноцветными и полупрозрачными.
Написано более года назад

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

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

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

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

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

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

CSS

Простой
Почему не работает псевдокласс not?
- 1 подписчик
- 10 янв.
- 106 просмотров
2

ответа
HTML

+3 ещё

Средний
Как включить полноэкранный режим для VKVideo внутри iframe с srcdoc?
- 2 подписчика
- 10 янв.
- 106 просмотров
1

ответ
JavaScript

+2 ещё

Средний
Как установить анти-спам капчу на загрузку всего сайта?
- 1 подписчик
- 10 янв.
- 106 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Выпадающее меню сворачивается только на главной странице, как исправить?
- 1 подписчик
- 10 янв.
- 66 просмотров
1

ответ
CSS

Простой
Как скруглить углы у кривых углов?
- 1 подписчик
- 10 янв.
- 88 просмотров
0

ответов
JavaScript

+1 ещё

Средний
Как организовать прямую трансляцию иностранных ТВ-каналов на своем сайте?
- 1 подписчик
- 10 янв.
- 85 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Как сделать чтобы ниспадающее меню не не выходило за пределы контейнера?
- 1 подписчик
- 10 янв.
- 88 просмотров
1

ответ
CSS

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

ответ
CSS

+1 ещё

Средний
Можно ли накладывать/объединять блоки с наружным изображением?
- 1 подписчик
- 08 янв.
- 135 просмотров
0

ответов
HTML

+1 ещё

Простой
Современный учебник HTML/CSS?
- 1 подписчик
- 07 янв.
- 1778 просмотров
7

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

Верстальщик HTML

MST

от 450 $

Баннермейкер (html-5)/дизайнер-верстальщик/motion-дизайнер

BYTIME

от 130 000 ₽

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

Разработать бота\программу для автоматической регистрации на сайте

14 янв. 2025, в 16:17

10000 руб./за проект

Редакция сайта Wordpress

14 янв. 2025, в 16:08

2500 руб./за проект

Настроить новую базу 1С Розница 2.3

14 янв. 2025, в 16:04

1000 руб./в час

для начала - чего ты хочешь добиться?
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>

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

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

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

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