0
205
ViewsDoes anybody know why my <p> is so far away from the line above it?
css file:
what gets printed:
html file if it even necessary:
2 answers
Answer question0
You need to keep in mind that HTML elements come with default styling and each browser is slightly different. Then you need to use the browser developer tools to debug your code. Right click on your HTML element and select inspect.
Now highlighting over your HTML elements will display your margins, border, padding of the selected element, so you can see your h1 has a top and bottom margin applied, remember its default styling applied by the browser.
0
main{
text-align: center;
}
h1{
font-size:3.5em;
border-bottom: 2px solid #000;
display: inline-block;
padding: 0 10rem;
margin-bottom: 0
}
#aspiration{
text-align: center;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p></p>
<main>
<h1>David Bandas</h1>
</main>
<p id="aspiration">Aspiration front-end developer</p>
</body>
</html>Output:https://i.stack.imgur.com/NEWEr.png
Html tags come with default user agent stylesheet.If you want to change then need to reset this style with your style. You can check this default style,In chrome simply press ctrl + shift + i And select your tag.You can see default css.