Почему ширина Textarea и ширина DIV ведут себя по-другому?

У меня есть серия div ящиков, за которыми следует textarea с тем же классом, что и тот же стиль, но я заметил, что div, кажется, автоматически заполняет горизонтальную ширину родителя, пока textarea этого не делает. Предоставление textareawidth:100% решает проблему, но если я даю общий класс margin-left:80px, то textarea превышает родительский элемент, тогда как поля div этого не делают.Почему ширина Textarea и ширина DIV ведут себя по-другому?

Мне просто интересно, почему это происходит, и если оно может быть воспроизведено с помощью textarea. Самое чистое решение, которое я имею до сих пор, дает textareawidth:calc(100%-80px), но предпочел бы более «естественное» решение.

Вот пример кода: -

HTML

<body> 

    <div class="container"> 

     <div class="box"> 
     DIV 
     </div> 

     <div class="box"> 
     DIV 
     </div> 

     <form> 
      <textarea class="box">TEXTAREA</textarea> 
     </form> 

    </div> 

</body>

CSS

.container { 
    background: #bbb; 
    padding: 30px; 
    box-sizing: border-box; 
} 

.box { 
    height: 80px; 
    background: #888; 
    box-sizing: border-box; 
    margin: 0 0 50px 80px 
} 

textarea { 
    width: calc(100% - 80px); // CLEANISH SOLUTION 
}

Вот JSFiddle: https://jsfiddle.net/tndm2eqz/1/

источник

2016-04-07 Alluziion

текстовое поле не display:block по умолчанию у вас добавить display:block и width:100%; к вашему текстовому полю так, то почему бы вам не текстовое поле внутри .box DIV и сделать ширину текстовой: 100% с блоком. Например

.container { 
 
    background: #bbb; 
 
    padding: 30px; 
 
    box-sizing: border-box; 
 
} 
 

 
.box,.box textarea { 
 
    height: 80px; 
 
    background: #888; 
 
    box-sizing: border-box; 
 
} 
 
.box{ 
 
    margin: 0 0 50px 80px; 
 

 
} 
 
.box textarea { 
 
    display: block; 
 
    width: 100%; 
 
}

<div class="container"> 
 
    <div class="box"> DIV </div> 
 
    <div class="box"> DIV </div> 
 
    <form> 
 
     <div class="box"> 
 
      <textarea>TEXTAREA</textarea> 
 
     </div> 
 
    </form> 
 
</div>

источник

2016-04-07 13:08:44

Вы изменили структуру HTML. Я думаю, что дело в том, чтобы заставить его выглядеть одинаково, а _понимание структуры, чтобы понять, почему размер отличается. – DarkDust

он применяется CSS дается, но <form> находится между так width не наследуется prperly: https://jsfiddle.net/tndm2eqz/3/

.container { 
 
    background: #bbb; 
 
    padding: 30px; 
 
    box-sizing: border-box; 
 
} 
 

 
.box { 
 
    height: 80px; 
 
    background: #888; 
 
    box-sizing: border-box; 
 
    margin: 0 0 50px 80px; 
 
} 
 

 
form { 
 
    margin: 0 0 50px 80px; 
 
    padding: 0; 
 
} 
 

 
textarea.box { 
 
    width: 100%; 
 
    display: block; 
 
    margin:0; 
 
    box-sizing: border-box; 
 
}

<body> 
 

 
    <div class="container"> 
 

 
    <div class="box"> 
 
     DIV 
 
    </div> 
 

 
    <div class="box"> 
 
     DIV 
 
    </div> 
 

 
    <form> 
 
     <textarea class="box">TEXTAREA</textarea> 
 
    </form> 
 

 
    </div> 
 

 
</body>

источник

2016-04-07 13:08:57

Ваше решение также добавляет 'width: 100%;' и 'box-sizing: border-box;'. Зачем? – DarkDust

Несомненно, наследование должно быть передано 'textarea' через' form'? Я также попытался указать 'width: inherit', а также' width: 100% 'для' form' и 'textarea', но не дал желаемого результата, почему это? – Alluziion

@ DarkDust box-size был уже установлен для .box в любом случае, он включает в себя границы и отступы в расчете ширины ...с текстовой областью по умолчанию –

div отображение type: block в отличие textarea. Если вы хотите, чтобы textarea вести себя как div, добавьте это:

textarea{ 
    display: block; 
}

И не забывайте о textarea «S границы и тени.

источник

2016-04-07 13:08:59 begoyan

Добавление 'display: block' в' textarea' не имеет никакого отношения к результату в JSFiddle, который я предоставил. Я также попробовал несколько других отображаемых значений безрезультатно. – Alluziion

.container { 
 
    background: #bbb; 
 
    padding: 30px; 
 
    box-sizing: border-box; 
 
    width:100%; 
 
    margin:0px; 
 
} 
 

 
.box { 
 
    height: 80px; 
 
    background: #888; 
 
    box-sizing: border-box; 
 
    margin: 0 0 50px 0; 
 
    width:100%; 
 
}

<body> 
 
    
 
    <div class="container"> 
 
    <div class="box"> 
 
    DIV 
 
    </div> 
 

 
    <div class="box"> 
 
    DIV 
 
    </div> 
 

 
    <form> 
 
     <textarea class="box" rows="10">TEXTAREA</textarea> 
 
    </form> 
 

 
    </div> 
 

 
</body>

источник

2016-04-07 13:20:27

Просто какой-то код без каких-либо объяснений почти бесполезен. Пожалуйста, объясните, что вы изменили и почему. – DarkDust

Почему ширина Textarea и ширина DIV ведут себя по-другому?

ответ

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