padding destroying div в div

Привет, я пытаюсь поместить div в div , но второй будет иметь прописку слева и справа.padding destroying div в div

, что у меня есть в результате является синим ДИВ, который выталкивание из черной граничил сОн «страницы»

скрипка показать это немного справа. Веб-страница показать его столько, сколько 50px Так оно и должно быть у набивка влево, вправо которых 25 каждый, но я не jnow где ошибка приходят из в Кодекса http://jsfiddle.net/124a0yd9/

Спасибо всем

CSS:

.page{ 
border:solid 4px black; 
width:100%; 
} 

.slogan_c { 
    color: #0099cc; 
    background-color: red; 
    font-weight: bold; 
     font-size:8px; 
margin-top:40px; 
margin-bottom:10px; 
    width: 100% 
padding-left:5px; 
padding-right:5px; 
border:solid 1px red; 

} 



.slogan_f{ 
border:solid 1px pink; 
     color: #ffffff; 
    background-color: blue; 
font-weight: bold; 
     font-size:30px; 
margin-top:40px; 
margin-bottom:10px; 
    width: 100%; 
padding-left:35px; 
padding-right:35px; 

}

HTML:

<div class='page'> 

<DIV class='slogan_f'> 
Texte 1, Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1, 
</DIV> 
<BR><BR><BR> 
<DIV class='slogan_c'> 
TExte 2, TExte 2,TExte 2,TExte 2,TExte 2,TExte 2,TExte 2,TExte 2,TExte 2,TExte 2,TExte 2,TExte 2,TExte 2,TExte 2,TExte 2,TExte 2, 
</DIV> 

</DIV>

источник

2015-10-27 user2806845

Изменить для .slogan_f

.slogan_f { 
width :auto}

Код:

.page { 
 
    border: solid 4px black; 
 
    width: 100%; 
 
} 
 
.slogan_c { 
 
    color: #0099cc; 
 
    background-color: red; 
 
    font-weight: bold; 
 
    font-size: 8px; 
 
    margin-top: 40px; 
 
    margin-bottom: 10px; 
 
    width: 100% padding-left: 5px; 
 
    padding-right: 5px; 
 
    border: solid 1px red; 
 
} 
 
.slogan_f { 
 
    border: solid 1px pink; 
 
    color: #ffffff; 
 
    background-color: blue; 
 
    font-weight: bold; 
 
    font-size: 30px; 
 
    margin-top: 40px; 
 
    margin-bottom: 10px; 
 
    width: auto; 
 
    padding-left: 35px; 
 
    padding-right: 35px; 
 
}

<div class='page'> 
 

 
    <DIV class='slogan_f'> 
 
    Texte 1, Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1, 
 
    </DIV> 
 
    <BR> 
 
    <BR> 
 
    <BR> 
 
    <DIV class='slogan_c'> 
 
    TExte 2, TExte 2,TExte 2,TExte 2,TExte 2,TExte 2,TExte 2,TExte 2,TExte 2,TExte 2,TExte 2,TExte 2,TExte 2,TExte 2,TExte 2,TExte 2, 
 
    </DIV> 
 

 
</DIV>

источник

2015-10-27 08:35:41 Tushar

Это потому, что обивка накапливается с шириной:

Таким образом, вы будете га ve ширина 100% + (35px * 2) ... Результат в div шире родительского.

источник

2015-10-27 08:35:49

Вы должны вычесть общую ширину с отступом (слева + справа) - размер границы, чтобы достичь 100% ширины.

.slogan_f{ 
    width: calc(100% - 72px); 
}

Total Дива Ширин (100%) - обивка левый (35px) - набивка правая (35px) - граница левый (1px) - граница правая (1px)

Работы скрипка http://jsfiddle.net/124a0yd9/2/

источник

2015-10-27 08:37:11 sandalkoyak

у вас есть 70px padding в вашей div + 100% ширина, и вам нужно удалить границу или изменить ее на 0. border: solid 0px pink;

источник

2015-10-27 08:38:57

Разделите это внутренним div: box-sizing: border-box;, и вы можете указать ширину внутреннего на 100% с любым желаемым дополнением.

источник

2015-10-27 08:46:55

padding destroying div в div

ответ

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