What you are facing in inspect mode, is not margin.
Just to make sure:
Each element, without changing the display property of the parent element, is placed below it’s sibling element. I mean elements are displayed in the page based on their place in your html.
That’s why browser shows that yellowish line right of the boxes, it means that this line is taken.
I suggest you set the display property for each section in html.
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 element in css.
Here’s my html code:
<!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>
And here’s my css code:
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);
}
Positioning is a
It is the
Do not confuse the
@Alohci can you tell the difference between the two u just told
@charles – Broadly, its just a multi step process. The declared values get resolved a specified value by the cascade, the specified value gets some calculations done to it, e.g. converting
See
@Alohci That’s very useful info thnx.