+ 3

why both gives different results?? help required-

<!DOCTYPE html> <html> <head> <title>Page Title</title> <style> h1 { font-size: 15pt; color: #20bcd5; text-align: center; padding: 10px margin: 0 18px 0px 0; } h1 span { border: 4px dashed #20bcd5; padding: 10px; } </style> </head> <body> <h1><span>HELLO H</span></h1> </body> </html>  <html> <head> <title>Page Title</title> <style> h1 { font-size: 15pt; color: #20bcd5; text-align: center; padding: 10px margin: 0 18px 0px 0; border: 4px dashed #20bcd5; } </style> </head> <body> <h1>HELLO H</h1> </body> </html>

html css html5 css3

5th Jan 2019, 9:29 AM

Wasiq Abdullah

4 Answers

+ 2

Because heading tag like h1 until h6 is a block element which will take all the spaces in the line while the span element is an inline element which will resize according to its contents ps sorry for the late reply, was doing something just now :D

5th Jan 2019, 12:12 PM

Leon lit

+ 2

If you're asking about why there's an addition square border in the first example, it's because you have a span element which doesnt exist in your second example that's why your second example doesnt have the border.... Hope I answered your question correctly :/ if not tell me more about your codes problem

5th Jan 2019, 9:52 AM

Leon lit

+ 2

but why in second example the width of border is much bigger then text and their is a huge space on sides of text... and in 1st example the padding of text is equal on all sides

5th Jan 2019, 9:57 AM

Wasiq Abdullah

+ 1

ahn good thankyou man now i understand

5th Jan 2019, 12:37 PM

Wasiq Abdullah