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

Question

Fasolll @Fasolll

HTML
CSS

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

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

Вопрос задан 03 янв.
121 просмотр

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

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

Kentavr16 @Kentavr16

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

Написано 03 янв.
Fasolll @Fasolll Автор вопроса

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

Написано 03 янв.
IvanU7n @IvanU7n

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

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

Написано 03 янв.
Fasolll @Fasolll Автор вопроса

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

Написано 03 янв.
IvanU7n @IvanU7n

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

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

Написано 03 янв.

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;
}

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

Написано 03 янв.

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

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

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

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

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

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

Войти через центр авторизации

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

CSS

+1 ещё

Простой
Как сверстать данный блок с последующим адаптивом?
- 1 подписчик
- 4 часа назад
- 51 просмотр
2

ответа
JavaScript

+3 ещё

Средний
Как переместить прокрутку таблицы к нижней части видимой области?
- 1 подписчик
- 4 часа назад
- 20 просмотров
0

ответов
CSS

+2 ещё

Средний
Как решить проблему у Sidebar на React.js?
- 1 подписчик
- 6 часов назад
- 27 просмотров
1

ответ
JavaScript

+3 ещё

Средний
Как динамически увеличить родительский блок в зависимости от градуса поворота дочернего?
- 1 подписчик
- 9 часов назад
- 29 просмотров
1

ответ
CSS

+1 ещё

Сложный
SVG ломается при стандартной анимации?
- 1 подписчик
- вчера
- 71 просмотр
1

ответ
JavaScript

+1 ещё

Простой
Как зафиксировать блок модального окна бутстра на iphone, чтоб он не прыгал при свайпах?
- 1 подписчик
- 09 мая
- 54 просмотра
0

ответов
PHP

+2 ещё

Средний
Проблема с отображением данных о городах из таблицы в запросе SQL?
- 1 подписчик
- 08 мая
- 61 просмотр
1

ответ
HTML

+1 ещё

Простой
Как применить nth-child?
- 1 подписчик
- 08 мая
- 97 просмотров
1

ответ
HTML

Простой
Не могу задать ширину таблицы html?
- 1 подписчик
- 07 мая
- 72 просмотра
1

ответ
CSS

+1 ещё

Простой
Daysi UI — изменить цвет, icon навигационного меню?
- 1 подписчик
- 06 мая
- 45 просмотров
1

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

Frontend-разработчик (React)

ДАЛЕЕ

от 140 000 ₽

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Переписать frontend и backend (опционально) web-сайта

11 мая 2024, в 18:48

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

Нужен Авитолог. Надо затестить нишу

11 мая 2024, в 18:27

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

Написать сео текст по ремонту квартир ТЗ

11 мая 2024, в 16:46

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

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

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

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

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

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