проблема с полями в css при использовании элемента position

#html #css #position

#HTML #css #позиция

Вопрос:

Я довольно новичок в веб-разработке, поэтому я столкнулся с проблемой поля, которая, я думаю, может быть связана с элементом position в css, хотя я не уверен.Здесь в коде, который я опубликовал ниже, это просто код для практических целей для элемента position в css. Вот мой html-код:

 <!DOCTYPE html>

<head>
    <title>Position Demo</title>
    <link rel="stylesheet" type="text/css" href="style1.css">
</head>

<body>
    <header>
        <span class="title-text">Position Demo</span>
    </header>
    <div class="container-1"></div>
    <div class="container-2"></div>
</body>

И вот мой код css:

 html {
    font-size: 62.5%;
}

*,
html,
body {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.title-text {
    font-size: 3rem;
    text-align: center;
    display: inline-block;
}

.container-1 {    <!-- this container has right margin even though I have set margin to 0--> 
    width: 10rem;
    height: 10rem;
    position: relative;
    top: 30%;
    left: 0;
    margin-right: 0;
    background-color: rgb(218, 173, 173);
}

.container-2 {   <!-- this container has right margin even though I have set margin to 0-->
    width: 10rem;
    height: 10rem;
    position: relative;
    top: 30%;
    left: 30%;
    margin-right: 0;
    background-color: rgb(149, 218, 183);
}

1. Позиционирование — очень плохой метод размещения веб-страниц. Он чрезвычайно негибкий, и есть гораздо лучшие и более отзывчивые варианты. Проверьте LearnLayout.com

2. Это используемое правое поле, автоматически изменяемое с 0, поскольку размеры блока уровня блока, не подлежащего замене, чрезмерно ограничены

Ответ №1:

То, с чем вы сталкиваетесь в режиме проверки, не является запасом.

Просто чтобы убедиться:

Каждый элемент, без изменения свойства отображения родительского элемента, размещается под своим родственным элементом. Я имею в виду, что элементы отображаются на странице в зависимости от их места в вашем html.
Вот почему браузер показывает эту желтоватую строку справа от полей, это означает, что эта строка занята.
Я предлагаю вам установить свойство отображения для каждого раздела в html.

1. Не путайте вычисленное значение поля, которое вы видите в окне инспектора, с используемым значением поля, которое изображено в оранжевом / желтоватом поле.

2. @Alohci можете ли вы сказать разницу между двумя, которые вы только что сказали

3. @charles — В целом, это просто многоступенчатый процесс. Объявленные значения каскадом преобразуются в указанное значение, с указанным значением выполняются некоторые вычисления, например, преобразование em s в px s и становится вычисленным значением. Это значение наследуется дочерними элементами, если это необходимо. Затем выполняются дополнительные вычисления для получения используемого значения, включая преобразование любых оставшихся «автоматических» значений в реальные значения. И, наконец, это преобразуется в фактическое значение для учета физических возможностей устройства.

4. Смотрите Вычисленное значение и используемое значение .

5. @Alohci Это очень полезная информация, спасибо.