How to Check the element type
you can check the element type by applying the border using CSS. if the border appears on the whole page. The element will be a block-level element and if the border wraps around the content of the element only. then the element will be an inline-level element
example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
border: 1px solid black;
}
</style>
</head>
<body>
<p>
This is a paragraph
</p>
</body>
</html>
In the above example, we have used a p tag. when we applied border on the p tag. the border covered all the page. so which shows that it is a block-level element.
example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span{
border: 1px solid black;
}
</style>
</head>
<body>
<span>
This is a span
</span>
</body>
</html>
In the above example. we have used a span element and applied a border on it. The border covered the content part of the element which shoes that is an inline-level element
Post a Comment