Как сделать отступ от картинки в html: Как сделать отступ от картинки?

Как окружить фото текстом и задать отступы текста от картинки

Ничего сложного в том, чтобы сделать обтекание картинки текстом, нет. В то же время, вопрос какой код нужен для задания отступов текста от картинки или фотографии достаточно распространенный у новичков, которые только начали вести блог или постигать основы html+css. В этой статье я приведу пару типичных решений для создания отступа картинки от текста в виде кода html и css.

Способ 1: Вписываем код отступа текста для отдельной картинки или фотки

Простой способ задания обтекания картинки текстом, не требующий знаний html и css.

Чаще всего встречается задача, когда нужно расположить картинку слева и чтоб при этом ее сверху, справа и снизу окружал текст. Еще желательно, чтобы текст располагался не вплотную к вставленной в статью фотографии или схеме, а немного отступал от картинки. Как правило, большинство админок генерируют код для вставки изображения, при котором картинка располагается слева, а текст начинается не справа вверху от картинки, в справа внизу, что удобно для крохотных иконок, но не подходит для больших картинок. Чтобы сделать обтекание текстом для изображения, как в этом способе, при вставке картинки в статью нужно написать такой код:

1 2 3 4

<img src=»здесь_веб-адрес_картинки» alt=»» /> alt=»Здесь_подсказка_если_картинка_не_загрузлась» title=»Здесь_встплывающая_над_картинкой_подсказка» height=»высота_ картинки_в_точках_числом» align=”left” style=»margin: 3px 12px 0px 0px;>

Например, для вставки картинки, которую вы видите в этой статье чуть выше, код html и css выглядит так:

1 2 3 4 5

<img src=»https://www.web-article.com.ua/wp-content/uploads/2009/12/otstup-kartinka-tekst.jpg» alt=»» /> alt=»Задаем отступ текста для фото» title=»Задаем отступ текста для фото» width=»300″ align=»left» style=»margin: 3px 12px 0px 0px;>

Если вместо

1	align=»left»

написать

1	align=»right»

картинка будет прижиматься к правому краю, а текст слева будет подходить к ней вплотную.

Отступ текста от краев картинки в данном случае задается css-стилем

1	margin: 3px 12px 0px 0px;

Параметры отступа здесь указываются по часовой стрелке, начиная с отступа картинку сверху (3px), затем отступ от картинки справа (12px) и т.д.

Способ 2: Задаем отступы сразу для всех картинок в блоке одним классом css

Для использования этого способа понадобятся некоторые знания основ верстки сайтов и желание копаться в исходниках.

Если фотографии или другие изображения нужно вставлять в тексты статей постоянно, при этом отступы между картинками и текстом всегда одни и те же, нет смысла прописывать стиль css для каждой картинки отдельно. Намного удобнее один раз описать отступы от картинки для текста и других изображений, размещенных в таком блоке. Классический вариант – вставка иллюстраций в текст статьи своего блога.

Для начала находим имя класса css, который описывает блок текста статьи, в html-коде страницы. Рекомендую открыть код страницы из браузера, найти там текст статьи с картинками, которым мы хотим задать отступы, и найти название класса css, который описывает стиль для текста статьи. Убедитесь, что этот css-класс не задает стиль заголовка, шрифт категории или еще что, а касается именно текста статьи:

Далее, в основном файле стилей css (обычно style.css) находите имя нужного класса (на примере его имя entry) и добавляете в файл описания стилей дополнительный класс, задающий поведение картинок (IMG) в нужном блоке:

1 2 3

.entry img { margin: 3px 12px 0px 0px; }

Обратите внимание на обязательную точку перед именем класса (у вас он, вероятно, будет называться не entry, как в моем шаблоне WordPress), пробел между именем css-класса и словом img, которое означает, что все инструкции класса относятся только к картинкам, находящимся внутри блока entry.

Числа, задающие отступ от картинки для текста и других изображений в статье, естественно, можно ставить свои. Первый параметр после дерективы margin задает отступ картинки сверху, далее отступ справа, затем отступ снизу и последний параметр – отступ картинки от правого края.

После изменения своего файла стилей с расширением .css его следует перезалить на свой сайт по ftp. В результате автоматически изменится отступ для всех картинок во всех статьях сайта/блога, стиль которых задается измененным css-классом.

html — Как уменьшить расстояние между текстом к картинкой

Подскажите, есть ли возможность не меняя размеров картинки и высоты строки, уменьшить расстояние прижать текст к картинке снизу на расстояние, близкое к марджину? https://codepen.io/smile33/pen/eYgZNBR

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
.wrapper {
  border: 1px solid black;
  min-width: 100px;
  max-width: 700px;
  margin: 20px auto;
  text-align: justify;
}
h3 {
  color: black;
  margin: 10px;
}
p {
  margin: 10px;
  font-family: sans-serif;
  line-height: 2;
  font-size: 13px;
}
p. link {
  text-align: right;
  margin-bottom: 30px;
}
a {
  text-decoration: none;
  color: blue;
}
.imgleft {
  float: left;
  /* Выравнивание по левому краю */
  margin: 7px 7px 7px 0;
  /* Отступы вокруг картинки */
}

<div>
  <h3> Новости </h3>
  <p><img src="https://i.ibb.co/Yhn7CJS/1.png" alt="">Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quasi, cum modi aliquam reprehenderit debitis sapiente, voluptas delectus mollitia sequi sint deleniti sed ipsa molestiae quos
    molestias nesciunt ipsum ab atque exercitationem necessitatibus! Reprehenderit, nostrum inventore ipsa cum, perferendis saepe officia itaque nulla ab repellendus maxime, quia quibusdam voluptas deserunt nam pariatur. Facilis vero distinctio nesciunt
    libero error ipsa consequatur natus nobis ea! Officiis harum tenetur saepe beatae deleniti natus deserunt at cupiditate nam! Error placeat explicabo eaque debitis velit amet maiores. Quisquam et ea doloremque debitis suscipit, cumque molestias quo
    saepe reprehenderit dolorem, accusantium facilis corrupti assumenda sequi voluptatibus?</p>
  <p><a href="#">подробнее.
   ..</a></p>
</div>
<div>
  <h3> О Компании </h3>
  <p><img src="https://i.ibb.co/sb5vnRG/2.png" alt=""> Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quasi, cum modi aliquam reprehenderit debitis sapiente, voluptas delectus mollitia sequi sint deleniti sed ipsa molestiae
    quos molestias nesciunt ipsum ab atque exercitationem necessitatibus! Reprehenderit, nostrum inventore ipsa cum, perferendis saepe officia itaque nulla ab repellendus maxime, quia quibusdam voluptas deserunt nam pariatur. Facilis vero distinctio nesciunt
    libero error ipsa consequatur natus nobis ea! Officiis harum tenetur saepe beatae deleniti natus deserunt at cupiditate nam! Error placeat explicabo eaque debitis velit amet maiores. Quisquam et ea doloremque debitis suscipit, cumque molestias quo
    saepe reprehenderit dolorem, accusantium facilis corrupti assumenda sequi voluptatibus?</p>
  <p><a href="#">подробнее...</a></p>
</div>
<div>
  <h3> Интересное </h3>
  <p><img src="https://i.   ibb.co/sQTfF8G/3.png" alt=""> Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quasi, cum modi aliquam reprehenderit debitis sapiente, voluptas delectus mollitia sequi sint deleniti sed ipsa molestiae
    quos molestias nesciunt ipsum ab atque exercitationem necessitatibus! Reprehenderit, nostrum inventore ipsa cum, perferendis saepe officia itaque nulla ab repellendus maxime, quia quibusdam voluptas deserunt nam pariatur. Facilis vero distinctio nesciunt
    libero error ipsa consequatur natus nobis ea! Officiis harum tenetur saepe beatae deleniti natus deserunt at cupiditate nam! Error placeat explicabo eaque debitis velit amet maiores. Quisquam et ea doloremque debitis suscipit, cumque molestias quo
    saepe reprehenderit dolorem, accusantium facilis corrupti assumenda sequi voluptatibus?</p>
  <p><a href="#">подробнее...</a></p>
</div>

• html
• css
• img

4

В таких случаях нижний отступ между картинкой и текстом всегда зависит от нескольких свойств:

1. Высота height картинки
2. Размер font-size текста
3. Высота line-height межстрочного интервала текста
4. Иногда и от font-family семейство шрифта

Поэтому, чтобы всегда(!) на выходе всё было красиво, нужно указывать точный размер высоты картинки, и высчитывая, задавать значения выше указанным свойствам для параграфа и отступы сверху и справа для картинки.

Отступы margin и padding у параграфа p откидываем, и задаем внутренний отступ padding контейнеру. Смотрите пример ниже. Хотя, и при всём этом «высчитывании», не всегда получается, чтобы на выходе в итоге отступы между картинкой и текстом оказались одинаковыми — пиксель-в-пиксель. Думаю, все со мной согласятся, что, наверное, это невозможно. Только лишь максимально приблизительно, и методом высчитывания.

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
.wrapper {
  border: 1px solid black;
  min-width: 100px;
  max-width: 700px;
  margin: 20px auto;
  padding: 10px;
  text-align: justify;
}
h3 {
  color: black;
  margin: 10px;
}
p {
  font-family: sans-serif;
  font-size: 13px;
  line-height: 26px;
}
p.link {
  text-align: right;
  margin-bottom: 30px;
}
a {
  text-decoration: none;
  color: blue;
}
.imgleft {
  float: left;
  width: 220px;
  height: 120px;
  margin: 6.5px 6.5px 0 0;
}

<div>
  <h3> Новости </h3>
  <p><img src="https://i.  ibb.co/Yhn7CJS/1.png" alt="">Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quasi, cum modi aliquam reprehenderit debitis sapiente, voluptas delectus mollitia sequi sint deleniti sed ipsa molestiae quos
    molestias nesciunt ipsum ab atque exercitationem necessitatibus! Reprehenderit, nostrum inventore ipsa cum, perferendis saepe officia itaque nulla ab repellendus maxime, quia quibusdam voluptas deserunt nam pariatur. Facilis vero distinctio nesciunt
    libero error ipsa consequatur natus nobis ea! Officiis harum tenetur saepe beatae deleniti natus deserunt at cupiditate nam! Error placeat explicabo eaque debitis velit amet maiores. Quisquam et ea doloremque debitis suscipit, cumque molestias quo
    saepe reprehenderit dolorem, accusantium facilis corrupti assumenda sequi voluptatibus?</p>
  <p><a href="#">подробнее...</a></p>
</div>
<div>
  <h3> О Компании </h3>
  <p><img src="https://i.ibb.co/sb5vnRG/2.  png" alt=""> Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quasi, cum modi aliquam reprehenderit debitis sapiente, voluptas delectus mollitia sequi sint deleniti sed ipsa molestiae
    quos molestias nesciunt ipsum ab atque exercitationem necessitatibus! Reprehenderit, nostrum inventore ipsa cum, perferendis saepe officia itaque nulla ab repellendus maxime, quia quibusdam voluptas deserunt nam pariatur. Facilis vero distinctio nesciunt
    libero error ipsa consequatur natus nobis ea! Officiis harum tenetur saepe beatae deleniti natus deserunt at cupiditate nam! Error placeat explicabo eaque debitis velit amet maiores. Quisquam et ea doloremque debitis suscipit, cumque molestias quo
    saepe reprehenderit dolorem, accusantium facilis corrupti assumenda sequi voluptatibus?</p>
  <p><a href="#">подробнее...</a></p>
</div>
<div>
  <h3> Интересное </h3>
  <p><img src="https://i.ibb.co/sQTfF8G/3.png" alt=""> Lorem ipsum dolor sit amet consectetur adipisicing elit.    Qui quasi, cum modi aliquam reprehenderit debitis sapiente, voluptas delectus mollitia sequi sint deleniti sed ipsa molestiae
    quos molestias nesciunt ipsum ab atque exercitationem necessitatibus! Reprehenderit, nostrum inventore ipsa cum, perferendis saepe officia itaque nulla ab repellendus maxime, quia quibusdam voluptas deserunt nam pariatur. Facilis vero distinctio nesciunt
    libero error ipsa consequatur natus nobis ea! Officiis harum tenetur saepe beatae deleniti natus deserunt at cupiditate nam! Error placeat explicabo eaque debitis velit amet maiores. Quisquam et ea doloremque debitis suscipit, cumque molestias quo
    saepe reprehenderit dolorem, accusantium facilis corrupti assumenda sequi voluptatibus?</p>
  <p><a href="#">подробнее...</a></p>
</div>

Можно попробывать у картинки убрать нижний отступ, например оставить только сбоку по 7 пикселей, и то мне кажется лучше оставить только справа,если по макету не нужен линий отступ слева(так симпотичнее смотриться), внизу 0 и вверху тоже. А если нужен вверху отступ, то мне кажется, лучше задать для заголовка нижний отступ. Но тут может получиться другая проблема, если поменять для параграфа высоту строки, то ситуация может повториться

.imgleft{
    float:left; /* Выравнивание по левому краю */
    margin: 0 7px 0 0 ; /* Отступы вокруг картинки */
}

3

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

css — текстовый отступ, деформирующий img в html

У меня есть правило для сообщений в блоге:

 p + p {
отступ текста: 1.5em;
}
 

определено в div:

 .entry-content{
    отступы: 2em 3em 4em;
}
 

, и у меня есть несколько изображений внутри

, определенных следующим образом:

 p > img {
    нижняя граница: 0,5em;
    максимальная ширина: 96%;
    высота: авто;
    отступ текста: 0em;
}
 

происходит следующее: сначала происходит изменение размера изображения до того, как к нему будет применен отступ, поэтому правое поле изображения выходит за пределы определенного отступа (3em), размер отступа (1,5em), не должен изменить размер изображения после отступа?

и даже с отступом текста : 0em; изображение по-прежнему следует правилу p+p и имеет отступ.

Я решил проблему, установив максимальную ширину на 96% вместо 100%, но нет ли более логичного способа решить эту проблему?

спасибо

• html
• css
• отступ текста

0

Максимальная ширина изображения определяется шириной p , содержащий изображение. text-indent не изменяет ширину p , но смещает текст/изображение внутрь, что приводит к нависанию изображения. В итоге вы видите правильное поведение.

Вам необходимо изменить html/css для достижения желаемых результатов. Без более полного примера я не могу предложить альтернативные подходы. Вы можете попробовать position: absolute на изображении, что заставит изображение перейти в верхний левый угол (игнорируя text-indent и padding ). Если вы попробуете это, не забудьте установить position: относительный на содержащий p .

 р + р {
    отступ текста: 1.5em;
    положение: родственник;
}
р > изображение {
    нижняя граница: 0,5em;
    максимальная ширина: 96%;
    высота: авто;
    положение: абсолютное;
    сверху: 0;
    слева: 0;
}
 

2

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания и подтверждаете, что прочитали и поняли нашу политику конфиденциальности и кодекс поведения.

html — Как сделать отступ для абзаца, который обтекает плавающее изображение?

спросил 7 лет, 4 месяца назад

Изменено 3 года, 7 месяцев назад

Просмотрено 1к раз

Я пытаюсь создать страницу вопросов и ответов с отступом для ответов. У меня есть изображение, плавающее слева вверху страницы. Я хочу сделать следующее: Ответы с отступом

Вот мой HTML-код:

 
Анкета кандидата

   jpg?1453726298"
  alt="Энтони Боутмэн" />

 
Энтони Боутман
 
 
Почему вы хотите работать в совете директоров RPFC?
 
Я считаю, что еда становится все более серьезной проблемой. Вот еще образец текста. Вот еще образец текста. Вот еще образец текста. Вот еще образец текста. Вот еще образец текста. Вот еще образец текста. Вот еще образец текста. Вот еще образец текста. Вот еще образец текста. Вот еще образец текста. Вот еще пример текста.
 

, но левый край абзаца находится у левого края страницы, а не у правого края изображения. Если я сделаю отступ больше, чем ширина изображения, абзац не будет правильно переноситься. Есть ли способ сделать отступ для всего абзаца по отношению к изображению и странице? Я хочу создать абзац класса p.answers с отступом в таблице стилей.

• html
• css
• css-float

Вы можете просто обернуть вопрос-ответ в div и применить следующий css.

 .ответы {
  ширина: 500 пикселей;
  плыть налево;
}
 

Пожалуйста, обратитесь к Jsfidle.

 https://jsfiddle.net/Rukhsana/fek24ag1/
 

2

Добавить дополнение к абзацу.

 п{
   отступ слева: 140 пикселей;
 }
 

Редактировать будет легко, если вместо встроенного стиля использовать следующий CSS между тегами head как встроенный стиль:

 img {
  плыть налево;
  граница: 1px сплошной черный;
  поле сверху: 1px;
  нижняя граница: 1px;
  поле слева: 6px;
  поле справа: 6px;
  }
п {
   отступ слева: 140 пикселей;
 }
 

Немного поэкспериментировав, я нашел решение: дайте тегу атрибуты, для которых вы хотите сделать отступ display: table и padding-left: 10px

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания и подтверждаете, что прочитали и поняли нашу политику конфиденциальности и кодекс поведения.