Почему не применяются падинги?
тег р, текст переносится на низ, хоть падинги как в дизайне. с фотографией тоже самое делала, но она правильно стоит
Дополнительно:
для начала - чего ты хочешь добиться?
в общем мне мало контекста, чтобы понять что не так
либо как вариант сделать минимальный пример где-нить типа codepen.io
<!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> |
<!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; } |
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> |
<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 */ } |
.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). Удобно толстенькими разноцветными и полупрозрачными.
тег <p> по умолчанию имеет display: block, если заменить его на обычный <span> то он не будет начинаться с новой строки
однако отступы какие-то слишком гигантские, и возможно применять их нужно к тегу <a> или <div>
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Падинги могут не применяться по нескольким причинам. Возможно, вы не указали значение для паддинга в свойствах CSS, либо значение, которое вы указали, не является корректным.
Если вы используете паддинги внутри блока, убедитесь, что вы правильно указали их значение. Например, если вы хотите установить паддинг слева и справа, то должны указать значение в формате `padding: 0 10px;`, где `0` - верхнее и нижнее значение паддинга, а `10px` - левое и правое значение паддинга.
Также, стоит проверить, что у вас нет других стилей, которые могут перекрывать или отменять паддинги. Например, если вы используете свойство `box-sizing: border-box;`, то размер элемента будет учитывать и внутренние отступы (паддинги) в его общей ширине, что может вызвать путаницу.
Если вы все еще столкнулись с проблемой, рекомендую воспользоваться инструментами разработчика в браузере для анализа стилей элемента и проверки, почему паддинги не применяются. Также убедитесь, что вы правильно закрыли все свои CSS правила и не допустили опечаток в названиях свойств или их значениях.
Приведу пример применения паддинга в CSS для языка программирования PHP:
.example { padding: 10px; background-color: lightblue; } <div class="example"> Пример текста с примененным паддингом. </div>.example { padding: 10px; background-color: lightblue; } <div class="example"> Пример текста с примененным паддингом. </div>
Надеюсь, это поможет вам разобраться с проблемой отсутствия применения паддингов в вашем дизайне веб-страницы. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их.