Изменение размеров блока при добавлении padding

@vanyakilkil · Регистрация: 13.06.2012

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

Так все хорошо. При добавлении отступов путем : padding: 10px сдвигается крайняя правая граница блока и текст может выходить за блоки. Еще заметил что при добавлении заголовков например <h3> у меня сверху ушел вниз блок чуть, точнее его границы. Если же все убрать то все нормально.. Прикладываю код и скрин в нормальном виде:

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
<!DOCTYPE html>
<html>
<head>
<title>Главная</title>
<link rel="stylesheet" type="text/css" href="css.css">
<meta http-equiv="content-type" content="text/html" charset="UTF-8">
</head>
<body>
 
<div id="site">
<div id="menu">
<ul>
<li><a href="index.html">Главная</a></li>
<li><a href="by.html">бла бла бла</a></li>
<li><a href="by.html">какая-то бяка...</a></li>
<li><a href="by.html">еще какая-то бяка...</a></li>
<li><a href="by.html">и еще какая-то бяка...</a></li>
<li><a href="by.html">блаблабла...</a></li>
<li><a href="info.html">О сайте</a></li>
<li><a href="kontakt.html">Контакты</a></li>
 
</ul>
</div>
 
<div id="article">
</div>
 
<div id="block">
 
</div>
<div id="info">
</div>
</div>
 
 
 
 
</body>
</html>

CSS
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
 
body {
background-color: #CCCC99;
margin:0;
}
 
 
#site {
width: 802px;
height: 1000px;
margin: 0 auto;
}
#menu
{
height: 60px;
width: 804px;
background-color: #CCCCCC;
}
 
#article
{
 
height: 250px;
width: 804px;
padding: 0;
background-image: url("u10302_9345_vetton_ru_757.jpg");
}
 
#menu ul    {
height: 41px;
list-style: none;
        padding:0;
margin:0;
 
}
 
#menu ul li {
float: left 
}
 
#menu ul a {
border-right: 1px solid #FFFF99;
color: #333333;
font-weight: bold;
font-size: 13px;
background: url("kok1.jpg") no-repeat top left;
width: 99px;
height: 41px;
float: left;
text-align:center;
padding-top:20px;
}
 
 
#menu ul a:hover
{
color: #0000FF;
font-weight: bold;
font-size: 13px;
background:url("kok2.jpg") no-repeat top left;
width: 99px;
height: 41px;
float: left;
text-decoration: underline;
 
}
 
#block
{
 
border-left: 1px solid #666666;
border-right: 1px solid #666666;
width: 802px;
height: 590px;
margin: 0px;
 
}
 
 
 
#info
{
border-top: 1px solid black;
border-left: 1px solid #666666;
border-right: 1px solid #666666;
width: 802px;
height: 100px;
margin-top: 0px;
}

@maximus2011 · 01.05.2013, 05:00

вы должны понимать, что если у блока есть заданная ширина или высота, то при добавлении padding допустим в 20px слева, вы должны отнять от ширины блока 20px в пользу padding. Тоже самое и с высотой.

Другими словами. если блок 800px в ширину и ему нужно прописать padding 20px слева, значит блоку, ширину делаем 780px

@vanyakilkil · 01.05.2013, 12:09 **[ТС]**

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

вы должны понимать, что если у блока есть заданная ширина или высота, то при добавлении padding допустим в 20px слева, вы должны отнять от ширины блока 20px в пользу padding. Тоже самое и с высотой.

Другими словами. если блок 800px в ширину и ему нужно прописать padding 20px слева, значит блоку, ширину делаем 780px

То бишь, если я ставлю к примеру padding: 10px, то мне нужно уменьшить ширину на десять пк, а если padding-top: 10px, тогда высоту?

@vanyakilkil · 01.05.2013, 12:14 **[ТС]**

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

вы должны понимать, что если у блока есть заданная ширина или высота, то при добавлении padding допустим в 20px слева, вы должны отнять от ширины блока 20px в пользу padding. Тоже самое и с высотой.

Другими словами. если блок 800px в ширину и ему нужно прописать padding 20px слева, значит блоку, ширину делаем 780px

Еще одно. Можно сделать так, чтобы текст не вылазил за границы блока? вот сам скрин

@vanyakilkil · 01.05.2013, 12:48 **[ТС]**

А при добавлении тега <pre> верхняя грань съехала снова

@Dolphin · 01.05.2013, 12:55

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

А при добавлении тега <pre> верхняя грань съехала снова

а зачем вам тег <pre>?

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

Еще одно. Можно сделать так, чтобы текст не вылазил за границы блока? вот сам скрин

на скрине у вас длииный набор букв, то есть перенести его никак, поэтому и вылазит. Можно лишь скрыть то, что выходит за границы

CSS
1
2
3
.selector{
    overflow: hidden;
}

@vanyakilkil · 01.05.2013, 12:58 **[ТС]**

Тег <pre> просто попробовал. Еще при добавлении тега <h3> в самом верху такое же.

@Dolphin · 01.05.2013, 13:00

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

Тег <pre> просто попробовал. Еще при добавлении тега <h3> в самом верху такое же.

Скорее всего добавляется отступ. Лучше по умолчанию установить все отступы нулевыми.

CSS
1
2
3
4
*{
    padding: 0;
    margin: 0;
}

@vanyakilkil · 01.05.2013, 13:02 **[ТС]**

margin и так стоит нулевым. padding хочу сделать 10пк, поставил 0 и все равно. Я тоже думал на отступы

@maximus2011 · 01.05.2013, 18:24

Если текст выходит за рамки, значит нужно смотреть ваши стили. По идее, если блок, в которм заключен текст или еще что-то, является родителем и за его границы выходить ничего не будет. Где-то есть подвох.

Чаще всего бывает такое из-за фиксирования высоты. Подумайте, поэксперементрируйте, ответ на поверхности.

Скорее всего это относится к блоку info

@vanyakilkil · 01.05.2013, 20:32 **[ТС]**

у меня все блоки фиксированной высоты. Сначала идет блок меню, потом артикл, потом блок, потом инфо, и все это объединено в один блок под названием site. Как бы все блоки находится в одном блоке. Опять таки, идет четко фиксированная высота и ширина блока, но тем не менее за его пределы выходит текст. Что касается сдвигов границ при отступах, я уменьшил блок и этим спасся. Но ведь это не правильно. У меня первый раз когда я ставлю padding блок начинает "пьянеть"

@koza4ok · 05.05.2013, 15:53

Может поможет http://htmlbook.ru/css/box-sizing

@Lancer-serega · 17.03.2014, 01:11

попробуй свойство

CSS
1
word-break: break-word;

Возможно поможет
Я знаю что оно помогает когда выводишь текст в теге

HTML5
1
<pre></pre>

при длинной строчке что бы строка не вылазила за блок

@vanyakilkil · 17.03.2014, 01:12 **[ТС]**

Lancer-serega, да тема была создана еще в апреле, спасибо, уже не нужно )

@Lancer-serega · 17.03.2014, 01:14

Я в курсе просто написал для других юзеров которые ищут ответ на свой вопрос (как и я 10 минут назад)

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера 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. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@maximus2011 269 / 261 / 35 Регистрация: 21.02.2012 Сообщений: 1,078
	01.05.2013, 05:00
	вы должны понимать, что если у блока есть заданная ширина или высота, то при добавлении padding допустим в 20px слева, вы должны отнять от ширины блока 20px в пользу padding. Тоже самое и с высотой. Другими словами. если блок 800px в ширину и ему нужно прописать padding 20px слева, значит блоку, ширину делаем 780px 1

@vanyakilkil 38 / 38 / 2 Регистрация: 13.06.2012 Сообщений: 650
	01.05.2013, 12:48 [ТС]
	А при добавлении тега <pre> верхняя грань съехала снова 0

@vanyakilkil 38 / 38 / 2 Регистрация: 13.06.2012 Сообщений: 650
	01.05.2013, 12:58 [ТС]
	Тег <pre> просто попробовал. Еще при добавлении тега <h3> в самом верху такое же. 0

@vanyakilkil 38 / 38 / 2 Регистрация: 13.06.2012 Сообщений: 650
	01.05.2013, 13:02 [ТС]
	margin и так стоит нулевым. padding хочу сделать 10пк, поставил 0 и все равно. Я тоже думал на отступы 0

@maximus2011 269 / 261 / 35 Регистрация: 21.02.2012 Сообщений: 1,078
	01.05.2013, 18:24
	Если текст выходит за рамки, значит нужно смотреть ваши стили. По идее, если блок, в которм заключен текст или еще что-то, является родителем и за его границы выходить ничего не будет. Где-то есть подвох. Чаще всего бывает такое из-за фиксирования высоты. Подумайте, поэксперементрируйте, ответ на поверхности. Скорее всего это относится к блоку info 0

@vanyakilkil 38 / 38 / 2 Регистрация: 13.06.2012 Сообщений: 650
	01.05.2013, 20:32 [ТС]
	у меня все блоки фиксированной высоты. Сначала идет блок меню, потом артикл, потом блок, потом инфо, и все это объединено в один блок под названием site. Как бы все блоки находится в одном блоке. Опять таки, идет четко фиксированная высота и ширина блока, но тем не менее за его пределы выходит текст. Что касается сдвигов границ при отступах, я уменьшил блок и этим спасся. Но ведь это не правильно. У меня первый раз когда я ставлю padding блок начинает "пьянеть" 0

@koza4ok 632 / 440 / 67 Регистрация: 19.09.2012 Сообщений: 1,632
	05.05.2013, 15:53
	Может поможет http://htmlbook.ru/css/box-sizing 0

@vanyakilkil 38 / 38 / 2 Регистрация: 13.06.2012 Сообщений: 650
	17.03.2014, 01:12 [ТС]
	Lancer-serega, да тема была создана еще в апреле, спасибо, уже не нужно ) 1

@Lancer-serega 6 / 6 / 1 Регистрация: 21.02.2014 Сообщений: 28
	17.03.2014, 01:14
	Я в курсе просто написал для других юзеров которые ищут ответ на свой вопрос (как и я 10 минут назад) 0