Почему padding влияет на ширину элемента?

-2

<style type="text/css"> 
div{height:400px} 
#container{width:100%} 
#left10{width:10%;float:left;background:red} 
#rest90{width:90%;float:left;background:yellow} 
</style> 
<div id="container"> 
    <div id="left10"></div> 
    <div id="rest90"></div> 
</div>

Как вы можете видеть, у меня есть 2 DIVs на моей странице, для ответных действий я назначаю ширину только двум DIVs в процентах. Теперь я хочу, чтобы содержимое в # rest90 DIV имело расстояние 20px до его левой границы. Но когда я установил # rest90-padding-left на 20px, DIV будет смещен. Fiddle: http://jsfiddle.net/xvnj9oem/Почему padding влияет на ширину элемента?

Я всегда думал, что прокладка внутри элемента, поэтому не должна влиять на относительное положение элемента с другими элементами. Но, видимо, я ошибся, по крайней мере, в этом случае. Я что-то пропустил? Нужно ли мне оставлять маржу слева для всех элементов внутри # rest90 для достижения моей цели?

источник

2014-09-30 shenkwen

Со стандартной модели коробки, 'width' определяет пространство, доступное для содержимого элемента (его«внутренняя ширина»), с' padding' в дополнение к этому. Чтобы отрегулировать это, см. Раздел [Предотвращение изменения простейшей ширины или высоты в CSS] (http://stackoverflow.com/questions/779434/preventing-padding-propety-from-changing-width-or-height-in-css) –

Взгляните на это: http://css-tricks.com/box-sizing/ – dippas

Вы должны посмотреть CSS Box Model.

За это работает должным образом:

#container{ 
    width: 100%; 
} 

#left10{ 
    width: 10%; 
    float: left; 
    background: red; 
} 

/** For width */ 
#rest90 { 
    width: 90%; 
    float: left; 
} 

/** For padding, margin and border */ 
/** The width of this container must be auto (default value) */ 
#rest90 > div { 
    padding-left: 1px; 
    background: yellow; 
}

<div id="container"> 
    <div id="left10"></div> 
    <div id="rest90"><div></div></div> 
</div>

источник

2014-09-30 23:09:43

Это то, что вы хотите сделать?

div { 
    height:400px 
} 
#container { 
    width:100% 
} 
#left10 { 
    width:10%; 
    float:left; 
    background:red; 
    left:0px; 
    position:absolute; 
} 
#rest90 { 
    padding-left:1px; 
    width:90%; 
    float:left; 
    background:yellow; 
    left:10%; 
    position:absolute; 
}

JSFiddle

источник

2014-09-30 23:11:03 robert

это потому, что вы не используете box-sizing

div{height:400px;box-sizing:border-box} 
 
#container{width:100%} 
 
#left10{width:10%;float:left;background:red} 
 
#rest90{width:90%;float:left;background:yellow}

<div id="container"> 
 
    <div id="left10"></div> 
 
    <div id="rest90"></div> 
 
</div>

источник

2014-09-30 23:17:36

Простой, как добавление к вашему DIV (или тег вам нужно)

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */

Взгляните на это: CSS BOX SIZING

div{ 
 
height:400px; 
 
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
 
-moz-box-sizing: border-box; /* Firefox, other Gecko */ 
 
box-sizing: border-box;   /* Opera/IE 8+ */ 
 
} 
 
#container{width:100%} 
 
#left10{width:10%;float:left;background:red} 
 
#rest90{width:90%;float:left;background:yellow; /*just to test padding*/ padding:20px }

<div id="container"> 
 
    <div id="left10"></div> 
 
    <div id="rest90"></div> 
 
</div>

источник

2014-09-30 23:19:23 dippas

Почему padding влияет на ширину элемента?

ответ

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