html — Как сделать отступ между картинкой и текстом?

Вопрос задан

Изменён 1 год 5 месяцев назад

Просмотрен 300 раз

Текст не сместился вправо, а просто остался под картинкой:

Я хотел бы в классе header_inner между картинкой и текстом сделать отступ, но justify-content: space-between; не работает. Вот написанный html код:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf=8">
        <link href="https://fonts.googleapis.com/css2? family=Lato:ital,wght@0,300;0,700;0,900;1,300&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="webpaint.css">
        <title>We are Webpaint</title>
    </head> 
    <body>
        <header>
            <div>
                <div>
                    <div>
                        <div><img src="images/Logo.
 
 png" alt="Logo"></div>
                    </div>
                
                    <nav>
                        <a href="#">HOME</a>
                        <a href="#">PORTFOLIO</a>
                        <a href="#">ABOUT</a>
                        <a href="#">BLOG</a>
                        <a href="#">CONTACT</a>
                    </nav>
                
                </div>
            </div>
        </header>
    </body>
</html>
Часть кода CSS:
    .header__inner{
        width:100%;
        display: flex;
        justify-content: space-between;
    }
  • html
  • css

3 

justify-content: space-between;

Должно работать, но у Вас даже flex не применился. Проверьте путь к файлу стилей. Возможно Вам стоит добавить еще type:

<link rel="stylesheet" type="text/css" href="webpaint. css">

А вообще, css файлы обычно лежат в папке css, поэтому:

 
<link rel="stylesheet" type="text/css" href="css/webpaint.css">

Проверить подключен ли стиль можно в chrome нажав f12, и посмотреть нет ли ошибок. А во вкладке source должен быть Ваш файл стилей. Например, у меня это

<link rel="stylesheet" type="text/css" href="css/style.min.css">

и вот он на скрине подключен

А еще если в VS code Зажать ctrl и нажать на путь к файлу, то Вас должно перебросить в сам файл. Если этого не происходит, Вы неправильно его подключили.

Ну и последнее: Сохраните все файлы, а затем обновите страницу с Вашим сайтом, тогда стили должны примениться, если файл css

подключен.

1

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

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

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

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

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

Почта

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

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

Почта

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

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

html — Лишний отступ внизу блока, содержащего img

Вопрос задан

Изменён 6 лет 2 месяца назад

Просмотрен 4k раз

CSS

main div. image {
    display: block;
    width: 100%;
}
main div.image img {
    width: 100%;
    height: auto;
}

HTML

<div>
  <img src="/images/nature-1.jpg" alt="">
</div>

Проблема в том, что этот код (да даже без любого CSS, просто картинка в другом теге) добавляют дополнительное пространство снизу родительского блока.

Вы можете заметить, что сама картинка уже «закончилась», но родительскому блоку все равно снизу добавляется некоторое свободное пространство. С чем это связано и как от этого избавиться —

вопрос. Хотя, может быть, это нормально и добавляется вне зависимости от моего желания, прямо как margin’ы у p. Хотя от них можно избавиться.

  • html
  • css

2 

main div.image img {
    width: 100%;
    height: auto;
}

Можно добавить

vertical-align: top;

либо использовать

display: block;

1

Картинка, по умолчанию, отображается как строковый элемент, на который влияет высота строки.

Именно высота строки ответственна за расстояние между div и img.

Решения два:

  1. Обнулить высоту строки для обертки.
  2. Сделать картинку блочным элементом.
.holder {
  border: 1px solid lime;
  outline: 1px solid #000;
  width: 100px;
}
.fix-1 {
  line-height: 0;
}
.fix-2 img {
  display: block;
}
<div>
  <div>
    <img src="http://satyr.io/100x100/1" alt="">
  </div>
  <div>
    <img src="http://satyr.io/100x100/2" alt="">
  </div>
</div>

2

добавте в стили к картинке display: block; — такое поведение изначально изза того что картинка по умолчанию инлаин

main div.image img {
   display: block;
   width: 100%;
   height: auto;
}

2

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

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

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

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

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

Почта

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

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

Почта

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

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

Отступ в HTML-изображениях — HTML

web5326946905

#1

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

Просто интересно, что мне следует делать в будущем, когда у вас есть отступы и однострочный код, который при вводе занимает более одной строки, вы делаете отступы все это и рискуете сломать его? Или вы позволяете следующей строке естественным образом перемещаться в крайний левый угол страницы? Или IDE/браузер CodeCademy уникален, и при использовании автономного текстового редактора у меня не было бы этой проблемы?

К вашему сведению, когда я обновил свой браузер, другой многострочный код абзаца удалил отступы, которые я добавил ранее, без каких-либо побочных эффектов. Спасибо.

заинабр1

9 октября 2019 г. , 16:33

#2

Привет,

Отступ не должен влиять на вывод,

Пожалуйста, вставьте свой код, чтобы я мог посмотреть и помочь вам

web5326946905

#3

Ввод/вставка этого работает без каких-либо отступов во второй строке с нетронутым переносом текста:

img src=»https://s3.amazonaws.com/codecademy-content/courses/web-101/web101-image_brownbear.jpg ” /

Но отступ во второй строке делает это и ломает URL-адрес:

img src=»https://s3.amazonaws.com/codecademy-content /courses/web-101/web101-image_brownbear.jpg» /

Так правильно ли здесь делать отступы или есть другой способ?

(Обратите внимание, что на концах нет угловых скобок, поскольку форум считает, что я загружаю изображения. )

Редактировать… браузер просто скрыл пробел после того, как я опубликовал его, на этом форуме нет функции предварительного просмотра?

Разрыв между контентом и курсами выглядит следующим образом: /codecademy-content /courses/web-101/

Редактировать 3… неважно, он снова скрыл пробелы. Я сдаюсь.

1 Нравится

zainabr1

#4

Вот как форматировать код на форуме:

Когда дело доходит до отступа, вы делаете отступ всего тега, а не в середине кода, здесь вы нарушаете URL-адрес

, поэтому отступ будет таким:

 < div id=location_one>
        
Центр города
 
       Адресная строка 1
       Адресная строка 2
        jpg" />

1 Нравится

веб5326946905

#5

Привет, еще раз спасибо за ответ.

Хм, когда я копирую и вставляю или набираю полный тег, он автоматически переносится, как только достигает конца текстового окна, отсюда и источник путаницы. Именно тогда я попытался вручную сделать отступ и сломал его. Думаю, мне следует просто оставить его нетронутым в будущем, независимо от того, как он выглядит.

К вашему сведению, ваша ссылка, кажется, перенаправляет на каталог codecademy, когда я открываю ее.

1 Нравится

zainabr1

#6

Вставлен неверный URL. Как форматировать код в сообщениях?

1 Нравится

веб5326946905

#7

Отлично, ссылка работает, я проверю. Спасибо еще раз.

2 Likes

css — text-indent деформирующий img в html

Задавать вопрос

спросил

Изменено 10 лет, 5 месяцев назад

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

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

 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

max-width изображения определяется шириной p , содержащий изображение.

No related posts.