Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.67/9: Рейтинг темы: голосов - 9, средняя оценка - 4.67
4ecHok
1 / 1 / 0
Регистрация: 06.12.2013
Сообщений: 88
1

Обёртка для padding

24.02.2014, 12:49. Просмотров 1566. Ответов 4
Метки нет (Все метки)

1)Друзья, напомните, как обрезать паддинги обёрткой.То есть если нужно сделать внутренние отступы в блоке, при уже разданных размерах, без потерь. Чтобы блок с паддингом изза увеличения размера не сдвигал соседний блок. У меня раньше получалось обернуть данных блок и паддинг не увеличивал размер блока, но сейчас что-то не получается.
Прикладываю код. На примере, изза паддингов, средний блок выталкивает правый.
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
<html>
<head>
<meta charset="utf-8" />
<title>Падинги</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
    <div id="container">
        <div class="box1 n1">
        Первый ящик
        <p>Каждый веб-разработчик знает, что такое текст-«рыба». Текст этот, несмотря на название, не имеет никакого отношения к обитателям водоемов. Используется он веб-дизайнерами для вставки на интернет-страницы и демонстрации внешнего вида контента, просмотра шрифтов, абзацев, отступов и т.д. Так как цель применения такого текста исключительно демонстрационная, то и смысловую нагрузку ему нести совсем необязательно. Более того, нечитабельность текста сыграет на руку при оценке качества восприятия макета.
        Самым известным «рыбным» текстом является знаменитый Lorem ipsum. Считается, что впервые его применили в книгопечатании еще в XVI веке. Своим появлением Lorem ipsum обязан древнеримскому философу Цицерону, ведь именно из его трактата «О пределах добра и зла» средневековый книгопечатник вырвал отдельные фразы и слова, получив текст-«рыбу», широко используемый и по сей день. Конечно, возникают некоторые вопросы, связанные с использованием Lorem ipsum на сайтах и проектах, ориентированных на кириллический контент – написание символов на латыни и на кириллице значительно различается.
        И даже с языками, использующими латинский алфавит, могут возникнуть небольшие проблемы: в различных языках те или иные буквы встречаются с разной частотой, имеется разница в длине наиболее распространенных слов. Отсюда напрашивается вывод, что все же лучше использовать в качестве «рыбы» текст на том языке, который планируется использовать при запуске проекта. Сегодня существует несколько вариантов Lorem ipsum, кроме того, есть специальные генераторы, создающие собственные варианты текста на основе оригинального трактата, благодаря чему появляется возможность получить более длинный неповторяющийся набор слов.</p>
        </div>
        <div>
        <div class="box1 n2">
        Второй ящик
        <p>Каждый веб-разработчик знает, что такое текст-«рыба». Текст этот, несмотря на название, не имеет никакого отношения к обитателям водоемов. Используется он веб-дизайнерами для вставки на интернет-страницы и демонстрации внешнего вида контента, просмотра шрифтов, абзацев, отступов и т.д. Так как цель применения такого текста исключительно демонстрационная, то и смысловую нагрузку ему нести совсем необязательно. Более того, нечитабельность текста сыграет на руку при оценке качества восприятия макета.
        Самым известным «рыбным» текстом является знаменитый Lorem ipsum. Считается, что впервые его применили в книгопечатании еще в XVI веке. Своим появлением Lorem ipsum обязан древнеримскому философу Цицерону, ведь именно из его трактата «О пределах добра и зла» средневековый книгопечатник вырвал отдельные фразы и слова, получив текст-«рыбу», широко используемый и по сей день. Конечно, возникают некоторые вопросы, связанные с использованием Lorem ipsum на сайтах и проектах, ориентированных на кириллический контент – написание символов на латыни и на кириллице значительно различается.
        И даже с языками, использующими латинский алфавит, могут возникнуть небольшие проблемы: в различных языках те или иные буквы встречаются с разной частотой, имеется разница в длине наиболее распространенных слов. Отсюда напрашивается вывод, что все же лучше использовать в качестве «рыбы» текст на том языке, который планируется использовать при запуске проекта. Сегодня существует несколько вариантов Lorem ipsum, кроме того, есть специальные генераторы, создающие собственные варианты текста на основе оригинального трактата, благодаря чему появляется возможность получить более длинный неповторяющийся набор слов.</p>
        </div>
        </div>
        <div class="box1 n3">
        Третий ящик
        <p>Каждый веб-разработчик знает, что такое текст-«рыба». Текст этот, несмотря на название, не имеет никакого отношения к обитателям водоемов. Используется он веб-дизайнерами для вставки на интернет-страницы и демонстрации внешнего вида контента, просмотра шрифтов, абзацев, отступов и т.д. Так как цель применения такого текста исключительно демонстрационная, то и смысловую нагрузку ему нести совсем необязательно. Более того, нечитабельность текста сыграет на руку при оценке качества восприятия макета.
        Самым известным «рыбным» текстом является знаменитый Lorem ipsum. Считается, что впервые его применили в книгопечатании еще в XVI веке. Своим появлением Lorem ipsum обязан древнеримскому философу Цицерону, ведь именно из его трактата «О пределах добра и зла» средневековый книгопечатник вырвал отдельные фразы и слова, получив текст-«рыбу», широко используемый и по сей день. Конечно, возникают некоторые вопросы, связанные с использованием Lorem ipsum на сайтах и проектах, ориентированных на кириллический контент – написание символов на латыни и на кириллице значительно различается.
        И даже с языками, использующими латинский алфавит, могут возникнуть небольшие проблемы: в различных языках те или иные буквы встречаются с разной частотой, имеется разница в длине наиболее распространенных слов. Отсюда напрашивается вывод, что все же лучше использовать в качестве «рыбы» текст на том языке, который планируется использовать при запуске проекта. Сегодня существует несколько вариантов Lorem ipsum, кроме того, есть специальные генераторы, создающие собственные варианты текста на основе оригинального трактата, благодаря чему появляется возможность получить более длинный неповторяющийся набор слов.</p>
        </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
body{
font:13px Verdana, Helvetica, Arial, Sens-serif;
background:#cba02d;}
 
#container{
width:90%;
border:1px solid black;
background:#b7e09e;
border-radius:10px;
margin:0 auto;
box-shadow:0 0 20px 1px;
}
 
.box1{
width:30.3%;
background:#eb7700;
border-radius:4px;
float:left;
color:#fff6a6;
text-align:justify;
box-shadow:0 0 20px 0 white;
padding:1%;
margin:1% 0.5%;}
 
.n2{
padding:20px;
}
2)Почему в моём примере, блоки не растягивают контейнер?
0
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
24.02.2014, 12:49
Ответы с готовыми решениями:

Input type=text padding-top, padding-bottom в safari не работают
&lt;!DOCTYPE html&gt; &lt;html lang=&quot;ru&quot;&gt; &lt;head&gt; &lt;meta http-equiv=&quot;Content-Type&quot;...

Padding сверху и снизу для строчных элементов
Вопрос зачем padding сверху и снизу для строчных элементов. Кроме наезжающих...

Почему при указывания padding для блока,увеличивается сам блок?
собственно сабж. По моему он по идее не должен увеличиваться. HTML и CSS...

Padding
&lt;div style=&quot;padding:10px;&quot;&gt; &lt;div&gt; Как заставить этот блог...

Padding-top в % и px
Дан блок, шириной - 396 px. Если задать padding-top - 54px, а потом заменить на...

4
monochromer
410 / 372 / 163
Регистрация: 03.01.2013
Сообщений: 966
24.02.2014, 13:16 2
Лучший ответ Сообщение было отмечено 4ecHok как решение

Решение

Лично я пользуюсь моделью box-sizing: border-box, благодаря ей свойство width означает ширину всего элемента, а не содержимого. Соответственно не возникает проблем с изменением padding'ов.

Но старые браузеры не поддерживают box-sizing. Рекомендуется писать
CSS
1
2
3
4
5
CSSselector {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
1
4ecHok
1 / 1 / 0
Регистрация: 06.12.2013
Сообщений: 88
24.02.2014, 15:46  [ТС] 3
Прекрасное решение!Не знал о таком!Здорово улучшает жизнь!Благодарю!
На второй вопрос хотелось бы тоже получить ответ.
Но за первый ответ-уважуха!
0
monochromer
410 / 372 / 163
Регистрация: 03.01.2013
Сообщений: 966
24.02.2014, 16:58 4
Цитата Сообщение от 4ecHok Посмотреть сообщение
У меня раньше получалось обернуть данных блок и паддинг не увеличивал размер блока
Ну, так оберните. Ширину задавайте у родительского блока, а padding (margin) - у дочернего.
http://jsbin.com/wihozuva/1/edit?html,css,output
HTML5
1
2
3
4
5
<div class="container">
  <p class="block">
    Lorem ipsum dolor sit amet!
  </p>
</div>
CSS
1
2
3
4
5
6
7
.container{
  width: 300px; 
}
 
.block{ 
  padding: 10px;
}
1
4ecHok
1 / 1 / 0
Регистрация: 06.12.2013
Сообщений: 88
24.02.2014, 17:13  [ТС] 5
Цитата Сообщение от monochromer Посмотреть сообщение
Ну, так оберните. Ширину задавайте у родительского блока, а padding (margin) - у дочернего.
Да, всё получилось ,спс
0
24.02.2014, 17:13
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
24.02.2014, 17:13

margin/padding
скажите, почему родитель с min-hight 100% не учитывает margin-bottom? как...

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

Padding выравнивание
Не получаться отцентрировать содержания в #content{ position:relative;...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru