Свойство CSS Margin и Padding

Я использую CSS для создания макета страницы с тремя колонками с верхним и нижним колонтитулом. Возьмем div Left_Col, например, который имеет ширину 200 пикселей. Я хотел бы иметь левое и правое дополнение 10px для этого div, так что текст в Left_Col, по существу, начинается с пикселя 10 и обертывается пикселем 190.Свойство CSS Margin и Padding

В приведенном ниже примере, чтобы добиться этого, я создаю еще один NEST DIV в div Left_COL и установите маржу в StdMargin (10px). Это работает, но я думал о другой альтернативе для достижения того же результата, а именно для отказа от внутреннего внутреннего div «stdMargin» и добавления атрибута «padding 10px» в div Let_Col. Тем не менее, я был разочарован тем, что это показало, что УВЕЛИЧЕНИЕ ширины LEFT_COL div превышает заданную ширину 200 пикселей и, таким образом, перекрывает средний div CONTENT, чего я не хотел.

Почему это происходит? Есть ли способ избежать вложенного внутреннего div? Слишком много вложенных объектов и я начинаю видя пересек глаза ...

Вот моя страница CSS:

/* CSS layout */ 
body { 
/* 
margin: 0; 
padding: 0; 
*/ 
margin: 0 auto; 
width: 1000px; 
} 

#masthead { 
background-color:aqua; 
} 

#top_nav { 
background-color:Yellow; 
} 

#container { 
background-color:maroon; 

} 

#left_col { 
width: 200px; 
float: left; 
background-color:#99FF33; 
} 

#page_content { 
margin-left: 200px; 
margin-right: 200px; 
background-color:#99CCFF; 
} 


#right_col { 
width: 200px; 
float: right; 
background-color:#F1E2E0; 
} 


#footer { 
clear: both; 
background-color:#BBBBFF; 
} 

.stdmargins{ 
margin:5px; 
}

А вот HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<meta content="en-us" http-equiv="Content-Language" /> 
<title>masthead</title> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<link href="3Column.css" rel="stylesheet" type="text/css" /> 
</head> 

<body> 

<div id="PageWidth"> 

<div id="masthead"> 
</div> 
<div id="top_nav"> 
<div class="stdmargins"> 
    Top Nav</div> 
</div> 
<div id="container">Container 
<div id="left_col"> 
    <div class="stdmargins"> 
    Left Column Top<br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    Left Col bottom<br /> 
</div> 
</div> 
<div id="right_col"> 
<div class="stdmargins"> 
    Right top<br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    Right bott<br /> 
</div> 
</div> 
<div id="page_content"> 
    <div class="stdmargins"> 
    </div> 
</div> 
</div> 
<div id="footer"> 
Footer</div> 

</div> 

</body> 

</html>

источник

2009-11-26 ChadD

Вычтите отступы от ширины. Так что если вы хотите, чтобы ДИВ в конечном итоге быть 200px в ширину, это:

padding: 10px; 
width: 180px; /* 200 - 10 - 10 */

Эта схема полезна: http://www.w3.org/TR/CSS21/box.html#box-dimensions

источник

2009-11-26 18:10:46 Caleb

В соответствии с CSS Box Model спецификации, поведение по умолчанию для элемента, который имеет отступы применяется заключается в увеличении его ширины и высоты. Тем не менее, вам всегда придется беспокоиться об измерении элемента и уменьшать ширину в соответствии с количеством примененных левых и правых прокладок. Например: если у вас есть div с 200px и padding10px, то width будет 220px.

Однако вы можете изменить это поведение, установив правило CSS3 «размер окна», которое делает ваш элемент не суммирующим отступ до конечной ширины/высоты. Вы можете проверить страницу мозиллы по теме: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing.

Но будьте осторожны: он не работает в старых браузерах, таких как IE 7, например. Если обратная совместимость не является проблемой для вас, идите прямо к ней.

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

<div id="column" style="width: 200px"> 
    <ul style="padding: 10px"> 
     <li>Some text</li> 
     <li>Some more text</li> 
     <li>Even more text</li> 
    </ul> 
</div>

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

источник

2013-07-22 17:06:02 darksoulsong

Свойство CSS Margin и Padding

ответ

Смежные вопросы