Удаление левого поля текста от изображения

У меня есть текст рядом с изображением, но у меня проблемы с margin-left, потому что он не отодвигает текст на 25 пикселей от изображений.

.standards img {
  float: left;
  margin-top: 50px;
  width: 400px;
  height: 350px;
  margin-left: 50px;
}

.standard-main p {
  margin-top: 50px;
  margin-left: 50px;
  margin-right: 50px;
}

<div class = "standards">
  <img src = "https://placekitten.com/100/100" alt = "">
</div>
<div class = "standard-main">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus
    vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis
    imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>
</div>

Снимок экрана

Любая помощь будет оценена и благодарим заранее

html css

17.12.2018 22:06

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Ответы 1

Что ж, у float и маржи сложная взаимосвязь.

Что вы можете сделать, так это дать p margin-left 475 пикселей (ширина изображения и его поля плюс желаемый зазор в 25 пикселей). Но тогда текст в букве p больше не будет обтекать изображение. Итак, в этом случае самое простое решение - дать img правое поле в 25 пикселей.

.standards img {
  float: left;
  margin-top: 50px;
  width: 400px;
  height: 350px;
  margin-left: 50px;
  margin-right:25px;
}

.standard-main p {
  margin-top: 50px;
  margin-left: 50px;
  margin-right: 50px;
}

<div class = "standards">
  <img src = "https://placehold.it/400x350" alt = "">
</div>
<div class = "standard-main">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus
    vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis
    imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>

17.12.2018 22:34

Другие вопросы по теме

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

Гиперссылки перекрываются с div

Прозрачное пространство между div и границей с радиусом границы

Как вы «складываете» гибкие элементы в отдельные столбцы?

Как преобразовать строку в целое число с помощью Vuejs, vuex?

Как выровнять выпадающее меню от вертикальной линии до горизонтальной линии?

Как изменить размер страницы без изменения элемента

Как разместить изображение поверх текста?

SignalR Chat: различение отправителя и получателя ListItem для Css

Выпадающее меню не работает при наведении курсора на панель навигации

Удаление левого поля текста от изображения

Ответы 1

Другие вопросы по теме

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