0

while applying class to div it is working but in case of span tag it shows absurd result the class attribute is working good in case of div tag

<html>
<head>
<style>
.city {
  background-color: tomato;
  color: black;
  border: 2px solid black;
  margin: 20px;
  padding: 20px;
}
</style>
</head>
<body>

<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div> 

<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>

<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>

<span class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</span> 

</body>
</html>

output: the output of the code is give below in the image attached to link

Saumil Gupta
  • 1
  • Hi, I suggest you start by checking your HTML syntax - it is not legal (e.g. having h1 element within span). Put your code through a CSS validator and correct it and then decide what you want to happen. – A Haworth Oct 24 '22 at 08:13

3 Answers3

1

span is an inline element and div is a block-level element, if you add display: block to the city class it will give the same output as the span. Read more about the span here.

Tharindu Dhanushka
  • 36
  • 4
0

.city {
  background-color: tomato;
  color: black;
  border: 2px solid black;
  margin: 20px;
  padding: 20px;
  /* added */
  display: block;
}
<div class="city">
  <h2>London</h2>
  <p>London is the capital of England.</p>
</div>

<div class="city">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
</div>

<div class="city">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
</div>

<span class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</span>
Andrei Fedorov
  • 3,689
  • 2
  • 13
  • 25
0

First of all you should know that using block-level element(like div or h2) in inline-level element(like span) is incorrect and in the other hand if you wanna have a block-level behavior from your span you should add display: block to your span

N.SH
  • 616
  • 7
  • 20