Текст не сместился вправо, а просто остался под картинкой: Я хотел бы в классе header_inner между картинкой и текстом сделать отступ, но justify-content: space-between; не работает. Вот написанный html код:
We are Webpaint
Отслеживать
задан 26 мая 2021 в 8:01
25 4 4 бронзовых знака
В вашем коде картинка и текст находятся в одной строке. Картинка прижата к левому краю окна, текст — к правому. А как вам нужно, чтобы было? Что значит «не работает»?
26 мая 2021 в 8:16
Согласен, у вас justify-content: space-between; работает.
26 мая 2021 в 8:31
Проверьте правильно ли подключены у вас css стили
26 мая 2021 в 9:20
Сортировка: Сброс на вариант по умолчанию
justify-content: space-between; Должно работать, но у Вас даже flex не применился. Проверьте путь к файлу стилей. Возможно Вам стоит добавить еще type :
А вообще, css файлы обычно лежат в папке css , поэтому:
Проверить подключен ли стиль можно в chrome нажав f12 , и посмотреть нет ли ошибок. А во вкладке source должен быть Ваш файл стилей. Например, у меня это
и вот он на скрине подключен
А еще если в VS code Зажать ctrl и нажать на путь к файлу, то Вас должно перебросить в сам файл. Если этого не происходит, Вы неправильно его подключили.
Ну и последнее: Сохраните все файлы, а затем обновите страницу с Вашим сайтом, тогда стили должны примениться, если файл css подключен.
Доброго времени суток! имеется два блока, которые находятся рядом т.е.
float: left
в первом блоке картинка а во втором текст, но получается так что текст прям касается картинки, делаю отступ с помощью padding или margin ничего не меняется, если значение отступа увеличиваю больше размера картинки тогда все норм. собственно вопрос, можно ли не увеличивать отступ на столько? если нет, то не будет ли в других мониторах с меньшим разрешить показывать по другому?
Лучшие ответы ( 1 )
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Как внути input сделать отступ для текста?
Добрый день. Как внути input сделать отступ для текста? <form <input.
Как задать дополнительный отступ для картинки внутри div?
Здравствуйте. Есть такой код: .big_arrow2 < display: block; background: #f7f7f7.
Iframe как задать отступ от текста
Доброго времени суток всем. Помогите пожалуйста разобраться, не как не могу понять как задать.
Как убрать отступ (строчный) текста от поля формы?
Здравствуйте помогите устранить один нюанс, как убрать отступ текста от поля формы? на рисунку.
653 / 556 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
Сообщение было отмечено ildwine как решение
margin-right для картинки или блока с картинкой
Ничего сложного в том, чтобы сделать обтекание картинки текстом, нет. В то же время, вопрос какой код нужен для задания отступов текста от картинки или фотографии достаточно распространенный у новичков, которые только начали вести блог или постигать основы html+css. В этой статье я приведу пару типичных решений для создания отступа картинки от текста в виде кода html и css.
Простой способ задания обтекания картинки текстом, не требующий знаний html и css.
Чаще всего встречается задача, когда нужно расположить картинку слева и чтоб при этом ее сверху, справа и снизу окружал текст. Еще желательно, чтобы текст располагался не вплотную к вставленной в статью фотографии или схеме, а немного отступал от картинки. Как правило, большинство админок генерируют код для вставки изображения, при котором картинка располагается слева, а текст начинается не справа вверху от картинки, в справа внизу, что удобно для крохотных иконок, но не подходит для больших картинок. Чтобы сделать обтекание текстом для изображения, как в этом способе, при вставке картинки в статью нужно написать такой код:
< img src = "здесь_веб-адрес_картинки" alt = "" / >alt=»Здесь_подсказка_если_картинка_не_загрузлась» title=»Здесь_встплывающая_над_картинкой_подсказка» width=»ширина_ картинки_в_точках_числом»
height=»высота_ картинки_в_точках_числом»
align=”left”
style=»margin: 3px 12px 0px 0px;>
Например, для вставки картинки, которую вы видите в этой статье чуть выше, код html и css выглядит так:
< img src = "https://www.web-article.com.ua/wp-content/uploads/2009/12/otstup-kartinka-tekst.jpg" alt = "" / >alt = «Задаем отступ текста для фото»
title = «Задаем отступ текста для фото»
width = «300» height = «350»
align = «left»
style = «margin: 3px 12px 0px 0px;>
align = «left»
align = «right»
картинка будет прижиматься к правому краю, а текст слева будет подходить к ней вплотную.
Отступ текста от краев картинки в данном случае задается css-стилем
margin: 3px 12px 0px 0px;
Параметры отступа здесь указываются по часовой стрелке, начиная с отступа картинку сверху (3px), затем отступ от картинки справа (12px) и т.д.
Для использования этого способа понадобятся некоторые знания основ верстки сайтов и желание копаться в исходниках.
Если фотографии или другие изображения нужно вставлять в тексты статей постоянно, при этом отступы между картинками и текстом всегда одни и те же, нет смысла прописывать стиль css для каждой картинки отдельно. Намного удобнее один раз описать отступы от картинки для текста и других изображений, размещенных в таком блоке. Классический вариант – вставка иллюстраций в текст статьи своего блога.
Для начала находим имя класса css, который описывает блок текста статьи, в html-коде страницы. Рекомендую открыть код страницы из браузера, найти там текст статьи с картинками, которым мы хотим задать отступы, и найти название класса css, который описывает стиль для текста статьи. Убедитесь, что этот css-класс не задает стиль заголовка, шрифт категории или еще что, а касается именно текста статьи:
Далее, в основном файле стилей css (обычно style.css) находите имя нужного класса (на примере его имя entry) и добавляете в файл описания стилей дополнительный класс, задающий поведение картинок (IMG) в нужном блоке:
.entry img {
margin: 3px 12px 0px 0px;
}
Обратите внимание на обязательную точку перед именем класса (у вас он, вероятно, будет называться не entry, как в моем шаблоне WordPress), пробел между именем css-класса и словом img, которое означает, что все инструкции класса относятся только к картинкам, находящимся внутри блока entry.
Числа, задающие отступ от картинки для текста и других изображений в статье, естественно, можно ставить свои. Первый параметр после дерективы margin задает отступ картинки сверху, далее отступ справа, затем отступ снизу и последний параметр – отступ картинки от правого края.
После изменения своего файла стилей с расширением .css его следует перезалить на свой сайт по ftp. В результате автоматически изменится отступ для всех картинок во всех статьях сайта/блога, стиль которых задается измененным css-классом.
Здравствуйте. Подскажите кто знает пожалуйста, как сделать отступ у текста относительно картинки вставленной через :before?
Лучшие ответы ( 1 )
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Как сделать отступ текста от картинки?
Доброго времени суток! имеется два блока, которые находятся рядом т.е. float: left в первом блоке.
Как установить отступ текста не от края кнопки, а от картинки?
Добрый вечер. Можно ли в Visual Studio задать кнопке такое свойство, чтобы TextAlign задавался не.
Как сделать одинаковый отступ от номера до текста
Всем привет! Я создал стили с нумерацией и определил их как многоуровневый список. Как можно.
Отступ текста поверх картинки
Всем привет. Есть картинка и поверх картинки текст. Необходимо чтобы отступ текста слева на.
1025 / 678 / 295
Регистрация: 04.04.2013
Сообщений: 2,707
N_Elena,
1 2 3
.content-list ul li { padding-left: 20px; }
Регистрация: 12.11.2020
Сообщений: 11
Если указать так, то, сдвигается и текст и галочки одновременно.
1025 / 678 / 295
Регистрация: 04.04.2013
Сообщений: 2,707
Сообщение было отмечено N_Elena как решение
1 2 3 4 5 6 7 8
.content-list ul li { padding-left: 20px; position: relative; } .content-list ul li:before { left: 0; }
Регистрация: 12.11.2020
Сообщений: 11
Сообщение от Academik 
N_Elena,
1 2 3
.content-list ul li { padding-left: 20px; }
Если ответить так, то, сдвигаются и текст и галочки одновременно
1025 / 678 / 295
Регистрация: 04.04.2013
Сообщений: 2,707
N_Elena, сообщением выше решение скинул.
Добавлено через 3 минуты
N_Elena, кстати а зачем вам в этом случае псевдокласс before? И без него все хорошо работает:
1 2 3 4
.content-list ul li { padding: 5px 0 5px 35px; background: url('img/icons/check.png') left no-repeat; }
Регистрация: 12.11.2020
Сообщений: 11
Спасибо, я увидела уже, просто нажимаю на быстрый ответ на конкретное сообщение, а в итоге ответ идет как общий.. )
Добавлено через 1 минуту
Academik,
Я обучаюсь и у меня задание, сделать верстку страницы,только с псевдоклассами и псевдоэлементами. Отработка навыков)
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь
Как внути input сделать отступ для текста?
Добрый день. Как внути input сделать отступ для текста? <form <input.
Как сделать отступ для текста 2 см сверху, с добавлением номер страницы ворд 2010
Нужна нумерация страниц в документе, при этом отступ от края листа до текста со всех сторон должен.
Позиционирование таблицы и текста относительно картинки
Нужно сделать чтобы картинка располагалась по центру, а справа от нее располагалась таблица. Снизу.
Выравнивание картинки относительно текста, CSS
Добрый день, очень хочется получить помощь в простом вопросе, но перепробовал все коды, что нашел.
Выравнивание текста посередине относительно картинки
<li> <div <img src="3.png"> </div> <div.