0

I am new to HTML and CSS. I have the following HTML code :

enter image description here

and the following CSS :

enter image description here

and the output goes like this :

enter image description here

When I remove the border from the main tag in CSS the whole output gets distorted. Initially the paragraph is having lots of space from the green border of main container. But when I remove the border from main tag it just clears all the pink area.

I am not able to understand what is border doing to the paragraph and why is it happening...Thanks in Advance and also it feels very annoying to not know the reason.

After removing border it looks like this :

enter image description here

Reeshav
  • 19
  • 2

1 Answers1

-1

The background-color is extending from the middle to the border. If there is no border, it uses the edge instead of the size. Instead of using the colored border, try using a border the same color as the background that is 1px.

So that would look more like:

main {
  background-color: violet;
  width: 50%;
  border: 1px solid white;
}

Image

Also does somebody know what the md tag for css is?

Hex
  • 59
  • 1
  • 12