HTML CSS padding

CyMKuH, 453 просмотра

#content {
margin-top: 15px;
width: 1050px;
border: 3px solid #000;
background-color: #EEE;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
text-align: left;
display: block;
}

<div id="content">bla-bla</div>

Почему если в стиль добавить padding: 10; делается не отсуп внутри дива, а див сам расширяется?

Примечание:
padding - станавливает значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое.

http://htmlbook.ru/css/padding

Примечание:
6aitan (Igor Hal) я минуснул только тех кто писал про margin. То что ты написал и так известно, что блок расширился на это кол-во пикселов. Но он же не должен был расширятся, вроде бы.

Ответы:

Махмуд Отар-Мухтаров

padding - это не внутренний отступ, а отступ между контейнерами. Для внутреннего отступа используйте margin-left, margin-right, margin-top и margin-bottom.

Старый пользователь

написать margin : 10px
P.S. зачем теорию писать в дополнении? просто напиши как я с Махмудом написали!Вы же всё равно в любой момент сможете изменить код!

الشيطان شر

Рискуя нарваться на минус , всё же предположу:
Вы задали размер для дива( width: 1050px)
потом прописали padding: 10px;
ну вот он и расширился именно на это количество пикселов
почитайте здесь:
http://www.site-do.ru/css/css9.php

الشيطان شر

да ты прям злодей какой-то

الشيطان شر

ну это как раз известная проблема именно с дивами причём разные браузеры по разному отображают, пройди по ссылке моей почитай,я так понимаю что тебе теоретически интересно почему так ?
Удачи
а вот ещё нарыл
www.tutwow.com/htmlcss/solving-the-css-padding-problem/

12 лет назад

RPI.su - самая большая русскоязычная база вопросов и ответов. Наш проект был реализован как продолжение популярного сервиса otvety.google.ru, который был закрыт и удален 30 апреля 2015 года. Мы решили воскресить полезный сервис Ответы Гугл, чтобы любой человек смог публично узнать ответ на свой вопрос у интернет сообщества.

Все вопросы, добавленные на сайт ответов Google, мы скопировали и сохранили здесь. Имена старых пользователей также отображены в том виде, в котором они существовали ранее. Только нужно заново пройти регистрацию, чтобы иметь возможность задавать вопросы, или отвечать другим.

Чтобы связаться с нами по любому вопросу О САЙТЕ (реклама, сотрудничество, отзыв о сервисе), пишите на почту [email protected]. Только все общие вопросы размещайте на сайте, на них ответ по почте не предоставляется.