0

I'm practicing some CSS, Despite setting the margin of the H1 tag to 0, it seems to be occupying the complete width of it's parent div, as when I insert a new element and float it to right it does not fits in the same div. Screenshots attached for complete details. Note: I've already set the div's width to 100px.

enter image description here

enter image description here

Vickar
  • 923
  • 11
  • 16
  • https://www.w3schools.com/html/html_blocks.asp – Temani Afif May 05 '18 at 16:16
  • 1
    I don't think this is a duplicate as the op did not set display:block explicitly. So he needs to know that a h1 has display:block by default – Tiago Coelho May 05 '18 at 17:05
  • @TemaniAfif, In what context do you find my question to be a duplicate one, How can you assume some one to search for the topic that he's not aware of !!! – Vickar May 05 '18 at 19:29
  • is there enough dupicates now? I can share more if you want :) .. all of them are equivalent and I also shared a link for w3schools – Temani Afif May 05 '18 at 19:33
  • take your time and read my code first, I've had already set it's width to 100px.All of your referred questions have width:100% – Vickar May 05 '18 at 19:37

2 Answers2

1

H1 by default have a display:block. That makes it get width 100% if you dont specify width. Try setting display: inline-block

Tiago Coelho
  • 5,023
  • 10
  • 17
  • Actullay, I was aware that an H1 tag is a block level element, But I thought setting it's width explicitly would decrease it's width. I wasn't familiar with display:inline-block property.Thanks for the solution. – Vickar May 05 '18 at 19:11
1

set display: inline-block; property on both the child elements and remove width to see if it is on the same line , then Apply Width based on your need.

Srinivas GV
  • 167
  • 7