Свойство CSS HTML Margin и Padding - PullRequest
Новая
       2

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

0 голосов
/ 26 ноября 2009

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

В приведенном ниже примере, чтобы добиться этого, я создаю еще один NEST DIV внутри Div_COL_ Left_COL и устанавливаю поле StdMargin (10px). Это работает, но я подумал о другой альтернативе для достижения того же результата, а именно об отказе от внутреннего внутреннего div "stdMargin" и добавлении атрибута "padding 10px" в div Let_Col. Однако я был разочарован тем, что это, похоже, увеличило ширину элемента LEFT_COL за пределы его определенной ширины в 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>

Ответы [ 2 ]

3 голосов
/ 26 ноября 2009

Вычтите отступы из ширины. Так что, если вы хотите, чтобы div получился шириной 200px, это: 

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

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

1 голос
/ 22 июля 2013

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

Однако вы можете изменить это поведение, установив правило CSS3 «размер блока», которое заставляет ваш элемент не суммировать заполнение до окончательной ширины / высоты. Вы можете проверить страницу Mozilla на эту тему: 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>

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...