AzuraLight Ответов: 1

Я не понимаю, почему он идет вниз! Как действует содержимое в области содержимого элемента "h1", когда поле полностью поглощает область содержимого?

<html>
<head>
    <title>content behavior</title>

    <style>

        .h1_wrapper {
            background: orange;
            position: relative;
            height: 5em;
            width: 45em;
            margin-top: 1em;
            border: 2px solid;
        }
        
        .h1_wrapper h1 {
            background: green;
            position: absolute;
            top: 1em;
            right: 25%;
            bottom: 10px;
            left: 1em;
            background-clip: content-box;
        }
        
        #marginless {
            margin: 0;
        }
    
</style>

</head>

<body>

    <div class="h1_wrapper">
        <h1 id="marginless">Hey I'm a header inside a div tag.</h1>
    </div>

</body>
</html>


Что я уже пробовал:

<html>
<head>
    <title>content behavior</title>

    <style>

        .h1_wrapper {
            background: orange;
            position: relative;
            height: 5em;
            width: 45em;
            margin-top: 1em;
            border: 2px solid;
        }
        
        .h1_wrapper h1 {
            background: green;
            position: absolute;
            top: 1em;
            right: 25%;
            bottom: 10px;
            left: 1em;
            background-clip: content-box;
        }
        
        #marginless {
            margin: 25px;
        }

    </style>

</head>

<body>

    <div class="h1_wrapper">
        <h1 id="marginless">Hey I'm a header inside a div tag.</h1>
    </div>

</body>
</html>

Richard MacCutchan

Пожалуйста, отредактируйте свой вопрос и добавьте правильное объяснение вашей проблемы.

AzuraLight

Благодарю вас, сэр, за то, что вы ответили на мой вопрос! Я просто хотел знать, почему поля, когда они полностью оборачивают область содержимого в этом примере, и от нее ничего не остается. Сам контент "Эй, я заголовок внутри тега div", спускается вниз? Я просто не понимаю причины, например, почему бы вместо этого не подняться наверх? (Зная, что чем больше полей я добавляю, тем больше "Эй, я заголовок внутри тега div" будет опускаться).

1 Ответов

Рейтинг:
2

Chubby Ninja

Вы пытаетесь выровнять его посередине?

Вы используете 

top:1em;
вот почему она идет так далеко вниз.

Вы могли бы сделать что-то вроде этого:
.h1_wrapper {
  background: orange;
  padding:1em;
  width: 45em;
  margin-top: 1em;
  border: 2px solid;
  box-sizing:border-box;
}
        
.h1_wrapper h1 {
  background: green;
  margin: 0;
  display:inline-block;
  padding:0.25em;
}


Или

.h1_wrapper {
  background: orange;
  padding:1em;
  width: 45em;
  margin-top: 1em;
  border: 2px solid;
  box-sizing:border-box;
}
        
.h1_wrapper h1 {
  background: green;
  margin: 0;
}

AzuraLight

Благодарю вас, сэр, за то, что вы ответили на мой вопрос! Я просто хотел знать, почему поля, когда они полностью оборачивают область содержимого в этом примере, и от нее ничего не остается. Сам контент "Эй, я заголовок внутри тега div", спускается вниз? Я просто не понимаю причины, например, почему бы вместо этого не подняться наверх? (Зная, что чем больше полей я добавляю, тем больше "Эй, я заголовок внутри тега div" будет опускаться).