ви встановили фіксовану висоту для #main-content, через що padding-bottom не діє. Висота видалення: 300 пікселів; або просто замініть 300px на auto. Тепер властивість padding-bottom має працювати.
Чому margin-bottom не працює в цьому випадку. Margin-bottom займає проміжок між собою та його наступним елементом. Якщо bottom не є, воно є реальним для вікна перегляду. Властивість Bottom працює, якщо позиція елементів не є відносною.
Як я можу встановити відступ у 20 пікселів внизу елемента? Щоб встановити відступ унизу 20 пікселів, використовуйте: padding-bottom: 20px;. Це створить простір у 20 пікселів між вмістом і нижньою межею елемента.
Padding-bottom 100px will створити той самий ефект, що й height:100px (без відступу), за винятком випадків, коли ви додаєте вміст. Вміст ніколи не зазіхає на область відступу (якщо він не переповнюється), а нижній відступ у 100 пікселів завжди зберігається.
Якщо елемент має будь-яку рамку або відступ, це потім додається до ширини та висоти, щоб отримати розмір поля, яке відображається на екрані. Це означає, що коли ви встановлюєте ширину та висоту, вам потрібно налаштувати значення, яке ви надаєте, щоб дозволити будь-яку межу чи відступ, які можуть бути додані.