0

I'm currently learning CSS and I am experimenting and I stumbled upon this difference in the output. So this is the code:

        <html>
    <body>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
    <style>
      .red-text {
        color: red;
      }

      h2 {
        font-family: Lobster, monospace;
      }

      p {
        font-size: 16px;
        font-family: monospace;
      }

      .smaller-image {
        width: 100px;
      }

      .thick-green-border {
        border-width: 10px;
        border-color: green;
        border-style: solid;

      }
    </style>

    <h2 class="red-text">CatPhotoApp</h2>
    <main>
      <p class="red-text">Click here to view more <a href="#">cat photos</a>. 
      </p>

      <a href="#"><div class="thick-green-border"><img class="smaller-image" 
      src="https://s3.amazonaws.com/freecodecamp/relaxing-cat.jpg" alt="A cute orange cat lying on 
      its back."></div></a>
    </main>
    </body>
</html>

and this is the output: enter image description here

However if I change this line:

 <a href="#"><div class="thick-green-border"><img class="smaller-image" 
  src="https://s3.amazonaws.com/freecodecamp/relaxing-cat.jpg" alt="A cute orange cat lying on 
  its back."></div></a>

to this(just replacing the div with span):

 <a href="#"><span class="thick-green-border"><img class="smaller-image" 
  src="https://s3.amazonaws.com/freecodecamp/relaxing-cat.jpg" alt="A cute orange cat lying on 
  its back."></span></a>

I get totally different output: enter image description here

So can anybody explain me what's going on in the code?

BoSsYyY
  • 563
  • 5
  • 13
  • https://stackoverflow.com/a/183536/6191987 – vishnu Jun 25 '18 at 08:40
  • Possible duplicate of [What is the difference between HTML tags
    and ?](https://stackoverflow.com/questions/183532/what-is-the-difference-between-html-tags-div-and-span)
     – giorgio Jun 25 '18 at 08:55

3 Answers3

3

The <div> tag is a block-level element so it takes entire block. but <span> tag is a inline element.

<div>0000000<div>111111</div>222222</div>

<span>0000000<span>111111</span>222222</span>

Check this example for clarification.

if i add display:block to span it behaves like a block. so it takes full width

span{display:block;border:1px solid green}
<span>0000000<span>111111</span>222222</span>
Znaneswar
  • 3,329
  • 2
  • 16
  • 24
  • I know that div is block-level and span is inline. But the span is supposed to work the way the div works because img is inline too, – BoSsYyY Jun 25 '18 at 09:01
  • here you have applied border to 'div' not to image. because you applied border to block element it shows properties of block element – Znaneswar Jun 25 '18 at 09:04
  • That's what I did. I know that when I apply the border to div it will work. But the question is why it doesn't work with the span? The img is within the span. – BoSsYyY Jun 25 '18 at 09:05
  • because its not a block level element just use display: block and border to span you can get the correct result – Znaneswar Jun 25 '18 at 09:08
2

It is about display style

div is display:block by default: whats mean it width:100%

→ that the reason border is in all the width

span is display: inline by default whats mean only necessary width

→ that the reason border is in width that span needs

Learn more here:https://www.w3schools.com/cssref/pr_class_display.asp See here:

div,span{
background-color:red;
}
<div>I take 100% of width the prove for it is background-color</div>
<span>I take width as my content prove for it is background-color</span>
לבני מלכה
  • 15,925
  • 2
  • 23
  • 47
0

The basic difference between <div> and <span> is that <div> takes the 100% of the width available whereas <span> is going to take the width that is required by the element inside it. We can also say that <div> is a block element and <span> is an inline. element

Gaurav
  • 19
  • 3