Игнорирование свойства padding.

Red Planet · February 11, 2011

Здравствуйте. В блоке есть два вложенных блока. Не понимаю, почему для правого не полностью применяется свойство padding? Отступ от правого края есть, а вот от левого нет. Это можно исправить, если задать свойству margin-left величину большую, чем ширина левого, но тот факт, что правый игнорирует padding стал для меня неожиданностью. Я что-то забыл или так оно и есть?

Скриншот (видно, что граница проходит вплотную).

HTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Temp</title>
 <link href="my-style.css" rel="stylesheet" type="text/css" />

 </head>

 <body>
		 <div id="content">
			 <div class="left">
				 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam iaculis, elit et rhoncus accumsan, turpis risus  aliquet ipsum, luctus mattis risus magna at lacus. Vivamus ultrices ante eget leo rutrum at malesuada magna egestas. Duis accumsan nunc luctus risus convallis id   gravida erat venenatis. Nam vitae urna in lacus gravida auctor eget sit amet ligula. Donec justo lorem, ultrices nec elementum non, placerat sit amet lectus. Phasellus nec nibh feugiat tellus faucibus convallis non et felis. Quisque consectetur velit eu dolor varius sagittis.</p>
			 </div>

			 <div class="right">
				 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam iaculis, elit et rhoncus accumsan, turpis risus  aliquet ipsum, luctus mattis risus magna at lacus. Vivamus ultrices ante eget leo rutrum at malesuada magna egestas. Duis accumsan nunc luctus risus convallis id   gravida erat venenatis. Nam vitae urna in lacus gravida auctor eget sit amet ligula. Donec justo lorem, ultrices nec elementum non, placerat sit amet lectus. Phasellus nec nibh feugiat tellus faucibus convallis non et felis. Quisque consectetur velit eu dolor varius sagittis.</p>
			 </div>
		 </div>
 </body>
 </html>

CSS.

body {
	 background: #ccc;
 }


 img {
	 border: none;
 }


 * {
	 margin: 0;
	 padding: 0;
 }


 #content {
	 margin: 0 auto;
	 width: 900px;
	 padding-bottom: 100px;
 }


 #content {
	 background: #9999cc;
 }


 #content div.left, #content div.right {
	 padding: 10px;
 }


 #content div.left {
	 float: left;
	 width: 400px;
	 border-right: 1px solid #000;
 }


 #content div.right {
	 margin-left: 400px;
 }

Edited February 11, 2011 by Red Planet

swetlana · February 11, 2011

Следует понимать, что делает float, и как вокруг блока с float'ом ведут себя другие блоки.

блок с float'ом выпадает из потока, прижимаясь к краю, а остальные его обтекают.

Так у div.right margin-left: 400px отсчитывается от левой границы #content.

а в эти 400px ну никак не может уложиться блок с

width: 400px;

border-right: 1px solid #000;

padding: 10px;

который в ширину занимает 421px.

Вот и получается такой эффект.

Lucky_13 · February 11, 2011

Поставь overflow:hidden на <div class="right"> и убери margin-left. Тогда будет отступ как ты хочешь.

Red Planet · February 12, 2011

Спасибо. Думал, что серьезная проблема, а оказалось, что всего лишь напутал с числами.

Sign In

Игнорирование свойства padding.

Question

Red Planet

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

swetlana

Link to comment

Share on other sites

Lucky_13

Link to comment

Share on other sites

Red Planet

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information