padding "ломает" верстку

]-[иколай · September 9, 2011

Здравия желаю всем форумчанам. Прошу помощи в тривиальном вопросе.

Нужно сверстать три колонки 40 20 и 40 процентов по ширине. Все нормально до тех пор, пока для внутренних элементов этих блоков я не указываю padding. В результате их(внутренних элементов) реальная ширина становится больше указанной.

На примере верхние текстовые поля со стандартным padding-ом, нижние - с увеличенным.

Есть ли какое-нибудь решение проблемы??? Спасибо!

И еще смежный вопрос: почему родительский див, содержащий несколько детей с float:left по высоте будет 0px? В данно примере div#containerMain имеет высоту 0px... И как это исправить?

Всем спасибо за помощь!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<style type="text/css">
	* {
		margin: 0px;
		padding: 0px;
	}
	div#containerMain {
		width: 80%;
		background-color:lime;
	}
	div#left, div#right {
		width: 40%;
		background-color: #FDFF81;
		float:left;
		height: 500px;
	}
	div#center{
		width: 20%;
		height: 500px;
		float:left;
		background-color: #FED69A;
	}

	input{
		width: 100%;
		border: none;
		background-color:lime;
	}
	input.wtf{
		padding: 50px;
	}
</style>
<html xmlns="http://www.w3.org/1999/xhtml">
	<body>
		<div id="containerMain">
			<div id="left">
				<h1>LEFT</h1>
				<input type="text" value="Нормальное текстовое поле" /><br />
				<input type="text" class="wtf" value="Разбухшее текстовое поле" />
			</div>
			<div id="center">
				<h1>CENTER</h1>
			</div>
			<div id="right">
				<h1>RIGHT</h1>
				<input type="text" value="Нормальное текстовое поле" /><br />
				<input type="text" class="wtf" value="Разбухшее текстовое поле" />
			</div>
		</div>
	</body>
</html>

Bonzash · September 9, 2011

Quote
-[иколай' timestamp=1315566533' post='221876]
И еще смежный вопрос: почему родительский див, содержащий несколько детей с float:left по высоте будет 0px? В данно примере div#containerMain имеет высоту 0px... И как это исправить?

<div style="clear: both;"></div>

После последнего блока с float

Edited September 9, 2011 by Bonzash

]-[иколай · September 9, 2011

Благодарю! А что-нибудь по основному вопросу сделать можно?

Edited September 9, 2011 by ]-[иколай

irinablue · September 9, 2011

по поводу паддингов - раз вы все делаете в %, то и паддинги задайте в %

input.wtf{width: 90%;padding:5%;}

не забывайте, что паддинг добавляется к результирующей высоте/ширине

Edited September 9, 2011 by irinablue

]-[иколай · September 9, 2011

irinablue, благодарю покорнейше!

Quote
не забывайте, что паддинг добавляется к результирующей высоте/ширине

Этого-то я как раз и не знал.

Gaspode · September 9, 2011

<div style="clear: both;"></div>

Не надо в мусорить такой бякой в коде. Поставьте вместо этого overflow: hidden для родителя.

Quote
В результате их(внутренних элементов) реальная ширина становится больше указанной.

Фактическая ширина видимой части блока = width + ширина боковых паддингов + ширина боковых бордеров.

В вашей ситуации, например, можно не задавать паддинги для родителей, а задавать марджины для детей. Тогда родители не пострадают.

Softlink · September 9, 2011

еще box-sizing можно использовать для этих целей

Nanto · September 9, 2011

On 9/9/2011 at 11:22 AM, Gaspode said:
<div style="clear: both;"></div>
Не надо в мусорить такой бякой в коде. Поставьте вместо этого overflow: hidden для родителя.

А в чём же заключается "бякность"?

Gaspode · September 9, 2011

Quote
А в чём же заключается "бякность"?

В том, что это мусор, которому в коде не место, поскольку он (мусор) никак не отражает его (кода) структуру. Это как несколько <br> ставить вместо стилевых отступов.

Nanto · September 9, 2011

On 9/9/2011 at 5:38 PM, Gaspode said:

Quote
А в чём же заключается "бякность"?
В том, что это мусор, которому в коде не место, поскольку он (мусор) никак не отражает его (кода) структуру. Это как несколько <br> ставить вместо стилевых отступов.

А, ну понятно... Опять мантры про семантику и заветы W3C... Я тоже раньше этим увлекался - везде ставил

html4/strict.dtd

, всё делал только на Div-ах, почти всю графику в бэкграунды, в закладках всегда валидатор был и т.д.

До тех пор пока не стал верстать серъёзные проекты со сквозными шаблонами... Где порой на одной странице напихано столько блоков и подключено столько стилевых свойств... Что попытка поправить "разъезжающуюся" структуру "невинным"

overflow:hiding

ведёт к непредсказуемым последствиям (ну типа в Файербаге всё ОК, а потом тестеры говорят что в IE всё рухнуло и т.п.). Так что я как-нибудь по старинке - после каждого нового внедрённого плавающего блока подчищу "бякой"

<div style="clear:both"></div>

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

div{_width:99%}

.

В браузерах в конце-концов не код смотрят, а отрендеренный результат!

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

А так, да, раз уж ратуете за чистоту коды, строгое разграничение струкуры и оформления, семантику и т.д. можно поёти ещё дальше - к семиотике, т.е. писать код так, чтобы теги в редакторе образовывали некие узоры - вот уж красотища будет! А главное, насколько процесс вёрстки станет рациональным!

P.S. И таки иногда действительно лучше поставить несколько

<br>

, чем потом ломать голову над такими правилами -

div{margin:4ex 1em 10px 2%;}

P.P.S. Кстати, для любителей семантики - проверьте насколько "семантично" (по мнению W3C, конечно) Вы верстаете, поставьте Амайю и гляньте на свои проекты...

Edited September 9, 2011 by Nanto

Softlink · September 9, 2011

On 9/9/2011 at 6:47 PM, Nanto said:
ведёт к непредсказуемым последствиям

например?

Verder · September 9, 2011

On 9/9/2011 at 6:53 PM, Softlink said:

On 9/9/2011 at 6:47 PM, Nanto said:
ведёт к непредсказуемым последствиям
например?

Ты собрался дискутировать с верстальщиком, который не знает как пишется overflow: hidden?

Gaspode · September 9, 2011

Quote
А так, да, раз уж ратуете за чистоту коды, строгое разграничение струкуры и оформления, семантику и т.д. можно поёти ещё дальше - к семиотике, т.е. писать код так, чтобы теги в редакторе образовывали некие узоры - вот уж красотища будет! А главное, насколько процесс вёрстки станет рациональным!

Ваша аргументация наповал сражает. Сила – в утрировании!

Quote
ведёт к непредсказуемым последствиям

Ой ли. Для того, кто не знает, как она работает, – конечно. Некоторые и во флоутах путаются.

Quote
Я и не против верстать по стандартам, если бы "физики-ядерщики" (подразумевается консорциум) удосужились хотя бы реализовать внятную, интуитивно понятную модель позиционирования, угу...

Плохому танцору...

Вы правда умеете <br>-ами вот такое заменять, да?

Quote
div{margin:4ex 1em 10px 2%;}

Научите?

Мне, кстати, ни разу в жизни такие марджины ставить не приходилось. Что я делаю не так?

Edited September 9, 2011 by Gaspode

Softlink · September 9, 2011

On 9/9/2011 at 6:57 PM, Verder said:

On 9/9/2011 at 6:53 PM, Softlink said:

On 9/9/2011 at 6:47 PM, Nanto said:
ведёт к непредсказуемым последствиям
например?
Ты собрался дискутировать с верстальщиком, который не знает как пишется overflow: hidden?

а может у него как раз в этом вся загвоздка? Он, написав так, ждет одного эффекта, а получается совсем иное.

Verder · September 9, 2011

On 9/9/2011 at 7:00 PM, Softlink said:

On 9/9/2011 at 6:57 PM, Verder said:

On 9/9/2011 at 6:53 PM, Softlink said:

On 9/9/2011 at 6:47 PM, Nanto said:
ведёт к непредсказуемым последствиям
например?
Ты собрался дискутировать с верстальщиком, который не знает как пишется overflow: hidden?
а может у него как раз в этом вся загвоздка? Он, написав так, ждет одного эффекта, а получается совсем иное.

Не, тут загвоздка в другом, более материальном

Nanto · September 9, 2011

On 9/9/2011 at 6:59 PM, Gaspode said:
Ой ли. Для того, кто не знает, как она работает, – конечно. Некоторые и во флоутах путаются.

Я тоже иногда путаюсь - когда четыре блока вложены друг в друга и все плавающие

Quote
Вы правда умеете <br>-ами вот такое заменять, да?

Quote
div{margin:4ex 1em 10px 2%;}
Научите?

Ну по логике: <br>=2ex, не?

On 9/9/2011 at 6:53 PM, Softlink said:

On 9/9/2011 at 6:47 PM, Nanto said:
ведёт к непредсказуемым последствиям
например?

ну так с ходу...

<div id="wrap">
<div class="layer1"></div>
<div class="layer2"></div>
</div>
<div class="layer3"></div>

и

#wrap{width:1000px;overflow:hidden}
.layer1{width:300px;float:left}
.layer2{width:300px}
.layer3{width:1200px}

Не? layer3 не обрежет ваше "семантически-корректное" overflow:hidden?

Какого чёрта давать заведомо большую ширину? Ну мало-ли... Графика порой из партнёрского контента тянется - надо чтобы влезла.

Пример утрированный, но суть думаю ясна...

Чаще конечно использую

<div class=".. cb"> .cb{clear:both}

...

P.S. И кстати, с точки зрения W3C, как раз таки подобная запись "семантически" более корректна - стилевое свойство "clear" используется по назначению, а не подставляются невнятные костыли "очичающие поток растягиванием на высоту".

Edited September 9, 2011 by Nanto

helicopter · September 27, 2012

Товарищи, а у меня творится вообще что-то паранормальное.

Какого-то черта стиль для блока радокнопок:

#selectors p {
	padding-bottom: .2em;
}

сдвигает всю обертку сайта на это значение ПО ГОРИЗОНАЛИ!

Кто-нибудь встречался с подобным?

Sign In

padding "ломает" верстку

Question

Link to comment

Share on other sites

16 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information