使用 position 元素時 css 中的邊距問題

Question

I am pretty new to web development so I am facing a margin issue which I think I might be due to position element in css,I'm not sure though.Here in code I have posted below is just a code for practice purpose on 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);
}

Answer 1

您在檢查模式下面臨的不是邊距。

只想確認一下：

每個元素，在不改變父元素的顯示屬性的情況下，被放置在它的兄弟元素之下。 我的意思是元素根據它們在 html 中的位置顯示在頁面中。
這就是為什么瀏覽器在方框右側顯示黃色線的原因，這意味着這條線被占用了。
我建議你在 html 中為每個部分設置顯示屬性。

使用 position 元素時 css 中的邊距問題

問題描述

1 個解決方案

解決方案1
0 2021-01-06 21:05:49

使用 position 元素時 css 中的邊距問題

問題描述

1 個解決方案

解決方案1 0 2021-01-06 21:05:49

解決方案1
0 2021-01-06 21:05:49