Margin-bottom не работает. Margin-bottom не работает Bottom не работает
Устанавливает положение нижнего края содержимого элемента без учёта толщины рамок и отступов. Отсчёт координат зависит от свойства position , оно обычно принимает значение relative (относительное положение) или absolute (абсолютное положение).
При относительном позиционировании элемента, отсчёт ведётся от нижнего края исходного положения элемента, а при абсолютном — относительно нижнего края окна браузера (рис. 1). Если для родительского элемента задано position : relative , то абсолютное позиционирование дочерних элементов определяет их положение от нижнего края родителя (рис. 2).
Рис. 1. Значение bottom при абсолютном позиционировании элемента
Рис. 2. Значение bottom относительно родителя
Краткая информация
Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| Группирует значения. | [ crop || cross ] | |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Значения
В качестве значений принимаются любые единицы длины, принятые в CSS — например, пиксели (px), дюймы (in), пункты (pt) и др. Значение свойства bottom может быть и отрицательным, в этом случае возможны наложения разных элементов друг на друга. При задании значения в процентах, положение элемента вычисляется в зависимости от высоты родительского элемента.
Auto Не изменяет положение элемента.
Пример
Интеграл Гамильтона, исключая очевидный случай, в принципе программирует интеграл по ориентированной области.
Результат данного примера показан на рис. 3.
Рис. 3. Применение свойства bottom
Объектная модель
Объект .style.bottom
Примечание
В браузере Internet Explorer до версии 7 для абсолютно позиционированных элементов нельзя одновременно задать свойства top , left , right , bottom .
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации ) - первая черновая версия стандарта.
У меня возникла разочаровывающая проблема, когда я пытаюсь установить стиль по ссылке, чтобы она всегда отображалась на расстоянии 10 пикселей от нижней части коробки, в которой она находится. По какой-то причине нижняя граница стиль, который я применил к нему, не работает... странно, что margin-top, margin-right и margin-left все работают, но когда я помещаю margin-bottom, он не регистрируется.
Я уверен, что это, вероятно, что-то глупое, мне не хватает, но я слишком долго пытался выяснить это и попробовать разные комбо, но, похоже, не может заставить его работать!
Я попытался применить стиль класса непосредственно к тегу ссылки, а также обернуть день абзаца вокруг ссылки и применить к ней класс. Метод абзаца работает так, что он позиционирует его вправо, как я хочу, но опять же он не применяет мое поле-снизу: 10px;
Любые идеи относительно того, что я делаю неправильно?
Ниже приведены фрагменты html для ящиков, а также css, которые я использую. Любые мысли/предложения были бы очень признательны!
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac viverra orci. Etiam volutpat lectus vitae tellus blandit volutpat. Maecenas ante quam, scelerisque et tempor ac, varius id eros. Integer hendrerit pretium feugiat.
linkHeading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac viverra orci. Etiam volutpat lectus vitae tellus blandit volutpat. Maecenas ante quam, scelerisque et tempor ac, varius id eros. Integer hendrerit pretium feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
link
Html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body {background: #FFFFFF; font-family: Arial, verdana, sans-serif;} .container {margin: 0 auto; width: 940px;} .box{ width:296px; height:270px; float:left; background-color:#ebe1bf; margin-top: 20px; border-style: solid; border-width: 2px; border-color: #e0d6b2; } .box h2{ font-size: 16px; margin-top: 18px; margin-left: 24px; color: #353535; } .box p{ margin-top: 10px; margin-left: 24px; width: 252px; font-size:13px; color:#525151; } p.c2a{ text-align:right; margin-bottom:10px; font-size: 14px; color:#00FF00; } .c2action a { text-align:right; margin-bottom:10px; font-size: 14px; color:#FF0000; } #box1{ margin-right: 20px; } #box2{ margin-right: 20px; }
Описание
Устанавливает положение нижнего края содержимого элемента без учета толщины рамок и отступов. Отсчет координат зависит от свойства , оно обычно принимает значение relative (относительное положение) или absolute (абсолютное положение).
При относительном позиционировании элемента, отсчет ведется от нижнего края исходного положения элемента, а при абсолютном — относительно нижнего края окна браузера (рис. 1). Если для родительского элемента задано position : relative , то абсолютное позиционирование дочерних элементов определяет их положение от нижнего края родителя (рис. 2).
Если одновременно задано свойство top и bottom со значениями отличными от auto , то свойство bottom игнорируется.
Синтаксис
bottom: значение | проценты | auto | inherit
Значения
В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Значение свойства bottom может быть и отрицательным, в этом случае возможны наложения разных элементов друг на друга. При задании значения в процентах, положение элемента вычисляется в зависимости от высоты родительского элемента.
Auto Не изменяет положение элемента. inherit Наследует значение родителя.
HTML5 CSS2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 3.
Рис. 3. Применение свойства bottom
Объектная модель
document.getElementById("elementID ").style.bottom
Браузеры
В браузере Internet Explorer 6 для абсолютно позиционированных элементов нельзя одновременно задать свойства top , left , right , bottom .
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .
CSS свойство bottom определяет смещение позиционированного элемента относительно нижнего края.
Результат применения свойства bottom напрямую зависит от позиционирования элемента к которому оно применяется, т.е. элемент будет смещаться в зависимости от значения свойства position :
- position : relative ; (элемент с относительным позиционированием) - при использовании свойства bottom элемент смещается вверх или вниз относительно его текущей позиции (отрицательное значение смещает вниз, положительное вверх). На примере bottom: -25px;
- position : absolute ; (элемент с абсолютным позиционированием) - при использовании свойства bottom смещается вверх или вниз относительно нижнего края его предка, при этом предок должен иметь значение position отличное от установленного по умолчанию - static , иначе отсчёт будет вестись относительно нижнего края окна браузера (как при position : fixed ;). На примере bottom: 100px;
- position : fixed ;(элемент с фиксированным позиционированием) - при использовании свойства bottom элемент смещается вверх или вниз относительно нижнего края окна браузера. На примере bottom: 25px;
- position : static ; (элемент со статическим позиционированием - по умолчанию) - значение свойства bottom не повлияют на позиционирование элемента.
Поддержка браузерами
| Свойство | Opera | IExplorer | Edge |
|||
|---|---|---|---|---|---|---|
| bottom | 1.0 | 1.0 | 6.0 | 1.0 | 5.0 | 12.0 |
CSS синтаксис:
bottom: "auto | length | initial | inherit" ;JavaScript синтаксис:
Object.style.bottom = "5%"
