Проблема с отступами в контейнере и шириной textarea

0nline · January 29, 2013



<html>
<head>
<style type="text/css">
body {margin:0;
padding:0;}
div.container {margin:100px auto;
width:400px;
padding:20px;
border:1px solid black}
p {display:inline}
input {display:block}
textarea {width:400px}
</style>
</head>
<body>
<div class="container">
<form method="post" action="add.php">
<p>Название продукта</p>
<input type="text" name"caption"/>
<p>Категория продукта</p>
<input type="text" name="category"/>
<p style="display:block">Описание продукта</p>
<textarea rows="5">
</textarea>
<input type="submit" value="Добавить"/>
</form>
</div>
</body>
</html>

Я посчитал, что если у меня у контейнера ширина 400px при отступах 20px с каждого края, то для того, чтобы textarea занял целиком блок-контейнер нужно задать ему ширину=400-20*2=360, но если так сделать, то получается, что textarea гораздо меньше чем необходимо.

ширина 360(получилось меньше чем нужно):

ширина 400(получилось как надо):

Edited January 29, 2013 by 0nline

USF · January 29, 2013

как он займет целиком блок, если у блока отступ в 20 пикселей?

ну и еще есть такая замечательная штука как width 100%

0nline · January 29, 2013

Я имел ввиду не целиком блок, а весь блок не считая отступов.

Кстати, спасибо за проценты, совсем забыл. Но все равно, хотелось бы разобраться с отступами...

Почему при ширине 360px не заполнились свободное пространство контейнера?

0nline · January 29, 2013

И откуда взялся интервал между textarea и надписью "Описание продукта"?

danik.html · January 29, 2013

Я имел ввиду не целиком блок, а весь блок не считая отступов.
Кстати, спасибо за проценты, совсем забыл. Но все равно, хотелось бы разобраться с отступами...
Почему при ширине 360px не заполнились свободное пространство контейнера?

Потому что у вас ширина внутренней доступной области контейнета 400px, а не 360. Вы же сами написали: width:400px;

Воспользуйтесь dom-инспектором, встроенным в ваш браузер (F12, Ctrl+Shift+I), в нем можно наглядно увидеть что и откуда берется.

0nline · January 30, 2013

Понятно, просто мне казалось, что ширина блока не меняется из-за паддингов. Спасибоза пояснение!

danik.html · January 30, 2013

Читайте про css-свойство box-sizing.

Sign In

Проблема с отступами в контейнере и шириной textarea

Question

0nline

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

USF

Link to comment

Share on other sites

0nline

Link to comment

Share on other sites

0nline

Link to comment

Share on other sites

danik.html

Link to comment

Share on other sites

0nline

Link to comment

Share on other sites

danik.html

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information