Создание вложенной рамки

@phpk · Регистрация: 15.05.2013

Author24 — интернет-сервис помощи студентам

Нужно чтобы внутренняя рамка сверху и сбоку отступала на определённое расстояние, как на рисунке

В 20-й строке указан margin-top: 50px, по идее должен внутренний блок сместиться на 50px, а смещаются оба блока!
Почему?

HTML5

<!DOCTYPE html>
<html>
<head>
  <script></script>
  <meta charset="utf-8">
  <title>Test</title>
 
 
  <style>
    .main {
        width: 100%;
        height: 800px;
        background: yellow;
    }
 
    .content{
        width: 700px;
        height: 500px;
        margin-left: 100px;
        margin-top: 50px;
        background: green;
    }
 
 
  </style>
</head>
 
 
<body>
    
        <div class="main">
            <div class="content"></div>
        </div>
 
</body>
</html>

@Lazy_Den · 23.10.2014, 14:07

CSS

.main {
    position: relative;
    width: 100%;
    height: 800px;
    background: yellow;
}
.content{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 700px;
    height: 500px;
    margin-right: 40px; /* отступ справа */
    margin-bottom: 20px; /* отступ снизу */
    background: green;
}

@phpk · 23.10.2014, 14:34 **[ТС]**

Я так понял что можно и без margin-right или без margin-bottom.
Вместо них можно и right и bottom ?

CSS

.main {
/*    position: relative;*/
    width: 100%;
    height: 800px;
    background: yellow;
}
.content{
    position: absolute;
    bottom: 100px;
    right: 50px;
    width: 700px;
    height: 500px;
/*margin-right: 40px;  отступ справа */
/* margin-bottom: 20px;  отступ снизу */
    background: green;
}

@Lazy_Den · 23.10.2014, 14:35

Сообщение от phpk

Вместо них можно и right и bottom ?

Можно.

@phpk · 23.10.2014, 14:36 **[ТС]**

почему так непонятно ведёт себя margin ?

@Lazy_Den · 23.10.2014, 14:39

Сообщение от phpk

почему так непонятно ведёт себя margin ?

Непонятно - это как? Уроки не хочет делать или за столом балуется?

@phpk · 23.10.2014, 14:57 **[ТС]**

не хочет отступать от краёв. Надо обязательно position: absolute в класс .content?

Добавлено через 10 минут
т.е. почему он тянет за собой родителя?

@Lazy_Den · 23.10.2014, 14:57

Сообщение от phpk

не хочет отступать от краёв.

Плохо уговаривали.

Сообщение от phpk

Надо обязательно position: absolute

Я ж не сказал, что это единственный вариант.
Смотрите два варианта. Первый - тот, что я показал выше, и второй - без абсолютного позиционирования:

CSS

.main {
    position: relative;
    width: 100%;
    height: 200px;
    background: yellow;
    text-align: right;
}
.main:before {
    display: inline-block;
    content: '';
    height: 100%;
    vertical-align: bottom;
}
.content {
    display: inline-block;
    width: 200px;
    height: 100px;
    background: green;
    margin-right: 40px; /* отступ справа */
    margin-bottom: 20px; /* отступ снизу */
}

Размеры в примерах уменьшил для наглядности результата.

@aj17 · 23.10.2014, 15:05

Не слушайте никого) сделайте вот так:

CSS

.main {
width: 100%;
height: 800px;
background: yellow;
overflow: hidden;
}

Добавили overflow: hidden;

@Lazy_Den · 23.10.2014, 15:09

Не по теме:

Сообщение от aj17

Не слушайте никого

)) Ну, так и напрашивается фраза Артура Блоха:

"Любая, даже самая сложная проблема обязательно имеет простое, лёгкое для понимания, неправильное решение"

@phpk · 23.10.2014, 15:12 **[ТС]**

Сообщение от aj17

Добавили overflow: hidden;

а где про это можно почитать, чтобы понять, что там произошло?

Добавлено через 1 минуту
нужен пример с комментариями, потому что с первого раза не совсем понятно. overflow поставил всё на своё место

@aj17 · 23.10.2014, 16:24

phpk, в гугле вбейте схлопывающиеся отступы )

@phpk 27 / 41 / 13 Регистрация: 15.05.2013 Сообщений: 1,313
	23.10.2014, 15:12 [ТС]	11
	Сообщение от aj17 Добавили overflow: hidden; а где про это можно почитать, чтобы понять, что там произошло? Добавлено через 1 минуту нужен пример с комментариями, потому что с первого раза не совсем понятно. overflow поставил всё на своё место 0

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	23.10.2014, 14:35	4
	Сообщение от phpk Вместо них можно и right и bottom ? Можно. 0

@phpk 27 / 41 / 13 Регистрация: 15.05.2013 Сообщений: 1,313
	23.10.2014, 14:36 [ТС]	5
	почему так непонятно ведёт себя margin ? 0

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	23.10.2014, 14:39	6
	Сообщение от phpk почему так непонятно ведёт себя margin ? Непонятно - это как? Уроки не хочет делать или за столом балуется? 0

@phpk 27 / 41 / 13 Регистрация: 15.05.2013 Сообщений: 1,313
	23.10.2014, 14:57 [ТС]	7
	не хочет отступать от краёв. Надо обязательно position: absolute в класс .content? Добавлено через 10 минут т.е. почему он тянет за собой родителя? 0

@Lazy_Den
	23.10.2014, 15:09 #10
	Не по теме: Сообщение от aj17 Не слушайте никого )) Ну, так и напрашивается фраза Артура Блоха: "Любая, даже самая сложная проблема обязательно имеет простое, лёгкое для понимания, неправильное решение" 0

@aj17 333 / 309 / 168 Регистрация: 02.06.2014 Сообщений: 1,130
	23.10.2014, 16:24	12
	phpk, в гугле вбейте схлопывающиеся отступы ) 1