Перевод на новую строку и отступ

@serauto79 · Регистрация: 02.04.2015

Студворк — интернет-сервис помощи студентам

Доброго всем!

Есть блок
<div class="blok">
в нем два элемента

HTML5
1
2
3
4
5
<p>
тут текст тектс текст...
<br><br><br>
<span>тег 1</span> <span>тег 2</span> <span>тег 3</span>
</p>

если между ними не проставить
<br><br><br>

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

только убрать из кода
<br><br><br>

Не могу найти вариант как через css стили реализовать, подскажите, вот весь код

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<html>
<head>
<meta content="text/html; charset=utf8" http-equiv="content-type">
 
 
 
 
<style>
 
 
 
 
 
 
 
 
.frame {
min-width: 300px;
padding: 2px;
display: inline-block;
}
 
 
 
 
 
.blok {
display: flex; 
align-items: center; 
}
 
.image {
margin-right: 15px; 
margin-left: 10px;
margin-top: 10px;
width: 200px;
height: 200px;
}
 
.blok p {
margin-bottom: -30px;
padding: 0px 10px 0px 10px;
color: #b6b556;
line-height: 1.2em;
text-align: left;
font-size: 15px;
margin-top: -100px; 
}
 
 
.blok span {
display: inline-block;
margin-bottom: 2px;
white-space: nowrap;
padding: 2px 4px 2px 4px;
border-width:1px;
border-style:solid;
border-color:#efefff;
background:#ffffff;
border-radius: 3px; 
}
 
 
 
</style>
 
</head>
<body>
 
 
 
 
 
 
 
 
<center>
 
 
 
 
<div class="frame">
 
<div class="blok">
<img src="294.jpg" alt="Описание изображения" class="image">
<p>
тут текст тектс текст...
<br><br><br>
<span>тег 1</span> <span>тег 2</span> <span>тег 3</span>
</p>
</div>
 
</div>
 
 
 
 
 
 
</center>
 
 
 
 
 
 
</body>
</html>

Добавлено через 3 минуты
нужно чтобы визуально все было как есть только без использования
<br><br><br>

@rr33rr · 01.12.2025, 00:50

Сообщение от serauto79

Перевод на новую строку и отступ

Обычно делается не так.
Т.е. если хочется делать отступ от блока текста, то и выделяют этот текст блоком, а затем его стилизуют.
Вроде такого:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
.text {
  display: block;
  margin-bottom: 2em;
}
</style>
<div class="blok">
  <img src="294.jpg" alt="Описание изображения" class="image">
  <p>
    <span class="text">тут текст тектс текст...</span>
    <span>тег 1</span> <span>тег 2</span> <span>тег 3</span>
  </p>
</div>

Но если очень хочется извратиться, то можно сделать вроде такого (у .blok span свойство display: inline-block; придется убрать):

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
.blok p span:first-child::before {
  content: "\a";
  white-space: pre; /* создает перевод строки */
}
.blok p span:first-child::after {
  content: "";
  display: inline-block;
  margin-top: 3em; /* задает размер отступа сверху */
}
</style>
<div class="blok">
  <img src="294.jpg" alt="Описание изображения" class="image">
  <p>
    тут текст тектс текст...
    <span>тег 1</span> <span>тег 2</span> <span>тег 3</span>
  </p>
</div>

krvsa · 01.12.2025, 09:32

Сообщение от serauto79

мне нужно чтобы отображалось визуально как сейчас
только убрать из кода

HTML5
1
<br><br><br>

Не могу найти вариант как через css стили реализовать, подскажите

Предложу такой вариант...

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
p {
    & :first-child:before {
        content: '';
        display: block;
        margin-top: 20px;
    }
}
</style>
<p>
    тут текст тектс текст...
    <span>тег 1</span> <span>тег 2</span> <span>тег 3</span>
</p>

@serauto79 · 01.12.2025, 13:16 **[ТС]**

Сообщение от rr33rr

Обычно делается не так.
Т.е. если хочется делать отступ от блока текста, то и выделяют этот текст блоком, а затем его стилизуют.
Вроде такого:

не такой пример не фурычер все отображает в одну строку

тут текст тектс текст... тег 1 тег 2 тег 3

а нужно так!

тут текст текст текст...

тег 1 тег 2 тег 3

Добавлено через 11 минут

Сообщение от rr33rr

Но если очень хочется извратиться, то можно сделать вроде такого (у .blok span свойство display: inline-block; придется убрать):

вот вывод в браузере вашего примера все элементы отображаются в вертикальную колонку так!

Описание изображения
тут текст тектс текст...

тег 1 тег 2 тег 3

а мне нужно отображение отображение картинки слева, а справа тект тект тект, а под тектом теги и это нужно сделать без перевода строки <br>

@voraa · 01.12.2025, 13:32

А вот так?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<html>
<head>
<meta content="text/html; charset=utf8" http-equiv="content-type">
 
<style>
 
.frame {
    min-width: 300px;
    padding: 2px;
    display: inline-block;
}
 
.blok {
    display: flex; 
    align-items: center; 
}
 
.image {
    margin-right: 15px; 
    margin-left: 10px;
    margin-top: 10px;
    width: 200px;
    height: 200px;
}
 
.blok p {
    margin-bottom: -30px;
    padding: 0px 10px 0px 10px;
    color: #b6b556;
    line-height: 1.2em;
    text-align: left;
    font-size: 15px;
    margin-top: -100px; 
}
 
.blok span {
    margin-bottom: 2px;
    white-space: nowrap;
    padding: 2px 4px 2px 4px;
    border-width:1px;
    border-style:solid;
    border-color:#efefff;
    background:#ffffff;
    border-radius: 3px; 
    line-height: 3em
}
 
.blok p span:first-child {
    white-space: pre-wrap;
}
 
.blok p span:first-child::before {
    content: "\000a";
}
</style>
 
</head>
<body>
 
<center>
 
<div class="frame">
 
<div class="blok">
<img src="294.jpg" alt="Описание изображения" class="image">
<p>
тут текст тектс текст...
 
<span>тег 1</span> <span>тег 2</span> <span>тег 3</span>
</p>
</div>
 
</div>
 
</center>
 
</body>
</html>

Хотя тоже не совсем. Граница рвется.
Похоже никак без дополнительной обертки

krvsa · 01.12.2025, 16:24

Сообщение от serauto79

а нужно так!

тут текст текст текст...





тег 1 тег 2 тег 3

У меня так выводит... См. сообщение №3.
Перевод на новую строку и отступ

@voraa · 01.12.2025, 18:17

Сообщение от krvsa

У меня так выводит... См. сообщение №3.

А так фигня получается.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
p {
    & :first-child:before {
        content: '';
        display: block;
        margin-top: 20px;
    }
    & span {
        border: 1px solid blue;
    }
}
</style>
<p>
    тут текст тектс текст...
    <span>тег 1</span> <span>тег 2</span> <span>тег 3</span>
</p>

У ТС span с border. Как только мы в span кладем :before, которые переходит на новую строку, граница рвется. Левый кусок остается вверху, а остальное переносится вниз

Добавлено через 40 минут
Вроде получилось

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<html>
<head>
<meta content="text/html; charset=utf8" http-equiv="content-type">
 
<style>
 
.frame {
    min-width: 300px;
    padding: 2px;
    display: inline-block;
}
 
.blok {
    display: flex; 
    align-items: center; 
}
 
.image {
    margin-right: 15px; 
    margin-left: 10px;
    margin-top: 10px;
    width: 200px;
    height: 200px;
}
 
.blok p {
    margin-bottom: -30px;
    padding: 0px 10px 0px 10px;
    color: #b6b556;
    line-height: 1.2em;
    text-align: left;
    font-size: 15px;
    margin-top: -100px; 
    
    display: flex;
    flex-wrap: wrap;    
}
 
p:after {
    content: '';
    margin-left: 100%;
    margin-top: 2em;
}
 
.blok p span {
    margin-bottom: 2px;
    white-space: nowrap;
    padding: 2px 4px 2px 4px;
    border-width:1px;
    border-style:solid;
    /* border-color:#efefff; */
    border-color: blue;
    background:#ffffff;
    border-radius: 3px; 
    
    order: 1;
}
 
</style>
 
</head>
<body>
 
<center>
 
<div class="frame">
 
<div class="blok">
<img src="294.jpg" alt="Описание изображения" class="image">
<p>
тут текст тектс текст...
 
<span>тег 1</span> <span>тег 2</span> <span>тег 3</span>
</p>
</div>
 
</div>
 
</center>
 
</body>
</html>

@serauto79 · 01.12.2025, 19:52 **[ТС]**

Сообщение от voraa

Вроде получилось

Спасибо!
Есть еще небольшой момент
у меня там ссылка подробнее находится
и она должна отображаться под тегами в правом нижнем углу блока

А сейчас кнопка полезла вверх после правок...

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<html>
<head>
<meta content="text/html; charset=utf8" http-equiv="content-type">
 
<style>
 
.frame {
    min-width: 300px;
    padding: 2px;
    display: inline-block;
}
 
.blok {
    display: flex; 
    align-items: center; 
}
 
.image {
    margin-right: 15px; 
    margin-left: 10px;
    margin-top: 10px;
    width: 200px;
    height: 200px;
}
 
.blok p {
    margin-bottom: -30px;
    padding: 0px 10px 0px 10px;
    color: #b6b556;
    line-height: 1.2em;
    text-align: left;
    font-size: 15px;
    margin-top: -100px; 
    
    display: flex;
    flex-wrap: wrap;    
}
 
p:after {
    content: '';
    margin-left: 100%;
    margin-top: 2em;
}
 
.blok p span {
    margin-bottom: 2px;
    white-space: nowrap;
    padding: 2px 4px 2px 4px;
    border-width:1px;
    border-style:solid;
    /* border-color:#efefff; */
    border-color: blue;
    background:#ffffff;
    border-radius: 3px; 
    
    order: 1;
}
 
 
 
 
.blok a {
width: auto;
color: #333333;
display: inline-block;
margin-bottom: 2px;
white-space: nowrap;
padding: 2px 2px 2px 2px;
float: right;
}
</style>
 
</head>
<body>
 
<center>
 
<div class="frame">
 
<div class="blok">
<img src="294.jpg" alt="Описание изображения" class="image">
<p>
тут текст текст...
 
<span>тег 1</span> <span>тег 2</span> <span>тег 3</span>
 
<a href="111111111111111111">Подробнее...</a>
</p>
</div>
 
</div>
 
</center>
 
</body>
</html>

@voraa · 01.12.2025, 20:23

Сообщение от serauto79

Есть еще небольшой момент
у меня там ссылка подробнее находится

А почему ее в исходном коде не было?
Неужели нельзя сразу все, что нужно показать?
Думаете по кусочкам добавлять проще?

@serauto79 · 01.12.2025, 21:29 **[ТС]**

Сообщение от voraa

А почему ее в исходном коде не было?

я подумал что гляну на правку и сам потом доработаю, но...

по факту мне нужно только заменить теги <бр> посчитал что будет просто

@voraa · 02.12.2025, 07:40

Ну по аналогии можно так сделать

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<html>
<head>
<meta content="text/html; charset=utf8" http-equiv="content-type">
 
<style>
 
.frame {
    min-width: 300px;
    padding: 2px;
    display: inline-block;
}
 
.blok {
    display: flex; 
    align-items: center; 
}
 
.image {
    margin-right: 15px; 
    margin-left: 10px;
    margin-top: 10px;
    width: 200px;
    height: 200px;
}
 
.blok p {
    margin-bottom: -30px;
    padding: 0px 10px 0px 10px;
    color: #b6b556;
    line-height: 1.2em;
    text-align: left;
    font-size: 15px;
    margin-top: -100px; 
    
    display: flex;
    flex-wrap: wrap;    
}
 
p:before {
    content: '';
    margin-left: 100%;
    margin-top: 2em;
    
    order: 1;
}
 
p:after {
    content: '';
    margin-left: 100%;
    margin-top: 2em;
    
    order: 1;
}
 
.blok p span {
    margin-bottom: 2px;
    white-space: nowrap;
    padding: 2px 4px 2px 4px;
    border-width:1px;
    border-style:solid;
    /* border-color:#efefff; */
    border-color: blue;
    background:#ffffff;
    border-radius: 3px; 
    
    order: 1;
}
 
.blok p a {
    color: #333333;
    margin-bottom: 2px;
    white-space: nowrap;
    padding: 2px 2px 2px 2px;
    
    order: 2;
}
</style>
 
</head>
<body>
 
<center>
 
<div class="frame">
 
<div class="blok">
<img src="294.jpg" alt="Описание изображения" class="image">
<p>
тут текст тектс текст...
 
<span>тег 1</span> <span>тег 2</span> <span>тег 3</span>
 
<a href="111111111111111111">Подробнее...</a>
 
</p>
</div>
 
</div>
 
</center>
 
</body>
</html>

А что куда там вправо, вниз - это сами. Я в css не особо.
Но вместо того, что бы так извращаться с css лучше бы не <br> убирали, а нормальный макет всего остального сделали.

krvsa · 02.12.2025, 09:20

Сообщение от serauto79

я подумал что гляну на правку и сам потом доработаю, но...
по факту мне нужно только заменить теги <бр> посчитал что будет просто

Тебе сразу сказали - сделай обертку и будет тебе счастие.

Если ты можешь менять html - к чему все эти танцы с бубнами?

@serauto79 · 02.12.2025, 15:06 **[ТС]**

по

Сообщение от krvsa

Тебе сразу сказали - сделай обертку и будет тебе счастие.

пример обертки?

Добавлено через 10 минут

Сообщение от voraa

А что куда там вправо, вниз - это сами.

Cавсибо, я добавил в сss
float: right;

в блок

CSS
1
2
3
4
5
6
7
8
.blok p a {
    color: #333333;
    margin-bottom: 2px;
    white-space: nowrap;
    padding: 2px 2px 2px 2px;
    float: right;
    order: 2;
}

но ссылка не сдвигается вправо, почему?

Добавлено через 9 минут
мне то и так подойдет, просто интересно почему не работает

CSS
1
float: right;

krvsa · 02.12.2025, 16:45

Сообщение от serauto79

пример обертки?

HTML5
1
2
3
4
5
6
<p>
    тут текст тектс текст...
</p>
<p>
    <span>тег 1</span> <span>тег 2</span> <span>тег 3</span>
</p>

И расставляй эти абзацы как угодно...

Добавлено через 3 минуты

Сообщение от serauto79

просто интересно почему не работает
float: right;

Это флексовый ребенок. Он управляется по "флексовым законам"...

@voraa · 02.12.2025, 17:01

Сообщение от serauto79

но ссылка не сдвигается вправо, почему?

Что бы понять это, надо учить css. Это полезно. Позволит многие вещи писать самому.

Сообщение от krvsa

И расставляй эти абзацы как угодно...

А почему вообще <p>, а не <div>? <p> - семантический элемент - параграф в тексте. Здесь нет текста, разбитого на параграфы. А <div> "бессмысленный" элемент, предназначенный для различной группировки других элементов и стилизации.

krvsa · 02.12.2025, 17:06

Сообщение от voraa

А почему вообще <p>, а не <div>?

"Набор" инлайновых элементов с текстом внутри - вполне может сойти за некий абзац...

Просто "некая часть текста" будет иметь рамку и какой-то фон...

Тег абзаца вполне допускает наличие внутри себя тегов span, да и не только его...

@voraa · 02.12.2025, 17:20

Сообщение от krvsa

Тег абзаца вполне допускает

Он много чего допускает. Теоретически в 98% случаев можно обойтись только <div>. Даже вместо <span>. HTML и CSS позволяют. Но так же не делают. Потому, что кроме возможностей есть еще и семантика.

Сообщение от serauto79

мне то и так подойдет, просто интересно почему не работает
float: right;

Внутри флексов можно использовать margin-left: auto;
https://developer.mozilla.org/... argin-left
(Только очень внимательно читать надо)

krvsa · 02.12.2025, 17:29

voraa, я не заставляю тебя использовать абзац...

Но и свое мнение я озвучил.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

Перевод на новую строку и отступ

Решение

Решение

krvsa 3836 / 1680 / 431 Регистрация: 14.03.2022 Сообщений: 4,244
	02.12.2025, 17:29
	voraa, я не заставляю тебя использовать абзац... Но и свое мнение я озвучил. 0