People who are confused with border box. Consider following scenario: width : 500 px padding :100 px border: 10 px without border-box the total width of content would be 500+100+10=610px. but with border-box total width of the content would be 500 only 100 and 10 px will consider inside 500 px.
for peoples who are getting confused: " in HTML there are inline and block elements, so with the help of display property you can make an inline element a block element. you can make a block element an inline element".hope this makes sense
First in the video it was shown as header is block So if we do Margin auto then header as it occupies full space margin auto will not work as margin on both side will be equal and 0 by itself So width was reduced and then margin auto centered the item But in second case of image we changed an inline to block but didn't add any width Why and how did it happen
Short note for those who get confused. 1)we can set width to block element and not to inline element. but we can make them block by { display: block} property. So that we don't have to use margin and padding extensively. 2)But what if we want that element to position itself (OR occupy space) like inline element and also get adjusted by width? for this we use {display:inline-block} property. Any correction would be appreciated!
Block element: A block-level element always starts on a new line. A block-level element always takes up the full width available. A block level element has a top and a bottom margin, whereas an inline element does not. Inline element: An inline element does not start on a new line. An inline element only takes up as much width as necessary. We can change an inline element into a block element(and vice-versa) using display property(display property ki madat se ham block element ko inline aur inline element ko block me change kar sakte hein). Display: Inline-block: Allows us to set a width and height on the element. The top and bottom margins/paddings are respected in inline-block. Display-inline: The top and bottom margins/paddings are NOT respected. Display: block: It is a block element and adds/occupies a whole line.
Most of the elements that you have learned about so far are block elements. In other words, their default style is display: block. By default, block elements will appear on the page stacked atop each other, each new element starting on a new line. Inline elements, however, do not start on a new line. They appear in line with whatever elements they are placed beside. A clear example of an inline element is a link, or tag. If you stick one of these in the middle of a paragraph of text, it will behave like a part of the paragraph. (Like this…) The link’s text will sit alongside other words in that paragraph. Additionally, padding and margin behave differently on inline elements. In general, you do not want to try to put extra padding or margin on inline elements.
This is only the best video in whole u tube on display properties where I found to the point explanation.keep it up harry bhai..u r the heart of millions of coders ❤🎉
bro this playlist is definitely amazing . No doubt at all. It'd be better if you give us some assignment kind of stuff after every video so that we will be familiar to what we are learning .That'd be really helpful .
We can center only block element using margin:auto , therefore to center inline elements first we need to convert them to block elements. Even in the case of block, first we need to set their width
Really interesting way to explain both block and in-line elements in hierarchy of markup language. Thanks a million, Harry for making these videos/tutorials and giving real-life examples and projects.
Harry Bro there's no-one who could have taught it any better. Thank you for this series and also for doing it for society i.e. for free, it now even inspires me to do something for this society to make it better. Thank you very much brother. Hope all your wishes come true.
Sir till 23 tutorial it was great..but it is really confusing for a beginner when things are confusing..as in this video after 12th minute..it was not clear at all
I have completed lecture 24 today. I have some confusion about this Display property. But I will try to practice it regularly. Now I am going to next lecture about Position. Thanks for the video
You are the reason that I can learn programming even while doing job. You are a gem for the programming community. LOT'S OF LOVE TO YOU AND MAY YOUR CHANNEL GROW LIKE WILD FIRE.
Too much to grasp in this video. Will need to re-watch it carefully to pick all the concepts again. Thanks for making these top quality educational videos Harry Bhai.
Analogies :- 1)display: inline-block: It convert block element into inline and also block so that it posses both properties so that it can give the same space to another block. 2)box-sizing: border-box: It justify the each box inside the container and each box give the same respect to each other to apply their properties.
U shouldn't have used img for explanation of this topic, since img is inline block element. Here we can set width and height unlike other inline elements. For those who are getting confused use anchor tag and try to give width, height and margin:auto to it. And u will find u cant, so u need to convert it into block element
/* dekho inline block display use karne ka ek hi maqsat hai multiple blocks ko ek line me lane ke liye qki agar display block hoga to ek hi block poori line ki width kha jayega aurhum multiple blocks kahan se layenge phir aur agar inline hoga to hum width set ni kar payege to isi lie hum late hain inline block ka concept jisme ki humare elements to inline hi rahenge matlab ki pooori ek line ni khayenge aur hm width set kr skte hain width set q karna hai width set is liye karna hai q ki agar hum 4 blocks ko ek line me fit karna chahte hain to sbki width 24% krdege (ek hi baar karenge class se target krke) agar 3 blocks ko ek line me karna hai to width 33% kardenge jaisa ki harry bhai ne kiya hai and so on */
inline property wo element jo ek line me jitni bhi jaga hoti h le leta h block element wo element h jiski width ham change kar lsakte hein aur wo block me hota h display property ki madat se ham block element ko inline aur inline element ko block me change kar sakte hein display: inline-block ki madat se ham inline element ko block element bna sakte hein ta k ham uski width change kar skein box-sizing: bprder-box; karne se jo width hamne di h wohi rahe gi including margin and padding
Harry sir ..pta nhi aaptk mera yeh comment poch bi payega yaa.. But me yeh kehna chahta hu ..ki aap bhut jaldi jaldi smjhate ho ..jisse new person bich bich me jroor rukta h ..jase me bi ..m
we can add (text-align) in header, in this case your all item will be in center, your photo and text so i think we don't need to add (text-align) individually. we can put (text-align) in header.
People who are confused with border box. Consider following scenario:
width : 500 px
padding :100 px
border: 10 px
without border-box the total width of content would be 500+100+10=610px.
but with border-box total width of the content would be 500 only 100 and 10 px will consider inside 500 px.
thanks
Bhai Mera ek inline block mai Nahi aa raha . Mai bilkul same Kar Raha hoo
@@masst1961mera bhi nhi aa raha
@@DHARMENDRASINGH-qc4hp Bhai aage Dekha hai
Harry bhai ne inline box Ka alternative flex bhi bataya hai.
@@masst1961 na bhai abhi nhi dekha
for peoples who are getting confused: " in HTML there are inline and block elements, so with the help of display property you can make an inline element a block element. you can make a block element an inline element".hope this makes sense
tnx
tnx
First in the video it was shown as header is block
So if we do Margin auto then header as it occupies full space margin auto will not work as margin on both side will be equal and 0 by itself
So width was reduced and then margin auto centered the item
But in second case of image we changed an inline to block but didn't add any width
Why and how did it happen
Tnx bro
@@Krenil. we did margin auto in img
Short note for those who get confused.
1)we can set width to block element and not to inline element. but we can make them block by { display: block} property. So that we don't have to use margin and padding extensively.
2)But what if we want that element to position itself (OR occupy space) like inline element and also get adjusted by width? for this we use {display:inline-block} property.
Any correction would be appreciated!
This is most underrated comment. Thanks it is useful to me :)
Img tag is a inline tag but still be can set its width. Why?
@@arkumar842 in that we are setting width of image, not width of the tag.
Thanks a Lot!!
great
Videos that keep me awake and not giving me up!
Hey Im getting confused, I feel like I'm not learned anything. Can u plz help me ? Like what should I do ? And how should I do?
@@nuclergaming9969 same here now bro😭
@@harshitachaurasia1246 that was the best reply 😂
@@rushigaikwad 😂😂😂
Mere toh aadha upper se jarha😂
Block element: A block-level element always starts on a new line.
A block-level element always takes up the full width available. A block level element has a top and a bottom margin, whereas an inline element does not.
Inline element: An inline element does not start on a new line. An inline element only takes up as much width as necessary.
We can change an inline element into a block element(and vice-versa) using display property(display property ki madat se ham block element ko inline aur inline element ko block me change kar sakte hein).
Display: Inline-block: Allows us to set a width and height on the element. The top and bottom margins/paddings are respected in inline-block.
Display-inline: The top and bottom margins/paddings are NOT respected.
Display: block: It is a block element and adds/occupies a whole line.
thanks myan
Most of the elements that you have learned about so far are block elements. In other words, their default style is display: block. By default, block elements will appear on the page stacked atop each other, each new element starting on a new line.
Inline elements, however, do not start on a new line. They appear in line with whatever elements they are placed beside. A clear example of an inline element is a link, or tag. If you stick one of these in the middle of a paragraph of text, it will behave like a part of the paragraph. (Like this…) The link’s text will sit alongside other words in that paragraph. Additionally, padding and margin behave differently on inline elements. In general, you do not want to try to put extra padding or margin on inline elements.
This is only the best video in whole u tube on display properties where I found to the point explanation.keep it up harry bhai..u r the heart of millions of coders ❤🎉
Watching it twice made sense 😀
Thank you so much Harry bhai i have solved my display property issue after watching your this video very easily.
The first lecture where I felt like it's bit tough to understand 😅😅😅..
@@yashkapoor2377 yeah web development is all about learning 10%then apply 100%(practice)
same
@@bharatmishra250 yes!!! we are soo lucky we are getting this for free my brother learned this from college...(web development)
@Deangelo Kyng girlfriend he banwa de bhai smjh to kuch aa Nahi raha hai time to pass hoga 🙂🙂
I felt this is floats but than I found an animated explanation of it then I really understood floats in a pretty good way'
I just want to include a point that in box-sizing:border-box;
The width is calculated by adding content+padding+border(not margin).
Thanks bhai 👍
Even I noticed it while using dev tools but sometimes width = content space alone and I don't know why
It was difficult for me to understand once but i rewatched and it worked for me 👍I think that coding will get more better the more we experiment !
bro this playlist is definitely amazing . No doubt at all. It'd be better if you give us some assignment kind of stuff after every video so that we will be familiar to what we are learning .That'd be really helpful .
U can practice or u can download some assignment from Google
We can center only block element using margin:auto , therefore to center inline elements first we need to convert them to block elements. Even in the case of block, first we need to set their width
Thanks bro i have been confusing in these things
Thanks bro, that helps
was helpful
thanks brother
For keeping the header in center, a more simple way is to use tag.
It is not much used in HTML5
@@heliconic Why ?
Thank You Sir Very Helpful video😇😇
Really interesting way to explain both block and in-line elements in hierarchy of markup language. Thanks a million, Harry for making these videos/tutorials and giving real-life examples and projects.
I continuously watched this video 4 times 😅😅 , then I got it 😊👍
ab mzaa aane lga ek no bhai
harry bhai asaan cheezein bohat ache se samjhayi, mushkil cheezein jaise pehle thi, ab bhi vaise hi rahi hai, ache se samjhao bhaijan.
Now its getting out of my head
watch it again and again and do some practice...
That's because you don't practice it.
Refer the net ninja html css crash course to understand inline-block
Element. He explained it in more proper way
my answer isalso same no difference
Bro watch it again first I was also getting confused
I visited to your website and inspected the source code of your website, it gave me positive feeling to design a website everyone should try this
I'm very thankful to you sir.
I learned many of things from your video.Thanks for giving us so much for free.
may god bless you.
Sir You are great.
Harry Bro there's no-one who could have taught it any better. Thank you for this series and also for doing it for society i.e. for free, it now even inspires me to do something for this society to make it better. Thank you very much brother. Hope all your wishes come true.
Harry Sir... Mai Playlist Ko Save kr liya hui...
Kafi mast lag raha sir ji... aapka lectures
Bahut bahut dhanywaad aapka...
CSS king Harry Bhai...proved
Best of best explaination Harry bro...accessing this video second time for better understanding of display proeprty❤🎉..got it deeply
mind blowing harry bhai but please explain slowly🥲 by the way nice video
Sir till 23 tutorial it was great..but it is really confusing for a beginner when things are confusing..as in this video after 12th minute..it was not clear at all
yes
its confusing
@Adwait Barkale exactly
Practice by urself...everything gonna be cleared...things r very interesting and easy my frnd...
@@arniksen7864 bro what is the best way to practice or learn ?
@@arniksen7864 bcoz I'm watching these videos but feel like I haven't learnt anything
2:03 CSS Target, 3:35 centering using margin auto, 5:30 Note, 7:59 inline block, 10:29 box sizing: border box, 12:07 display: inline-block
Display: table ?
I have completed lecture 24 today. I have some confusion about this Display property. But I will try to practice it regularly. Now I am going to next lecture about Position. Thanks for the video
After all the research I did, I can now finally conclude that this playlist is the best playlist for the web development course. Thanks Harry bhai!❤️
what about apna college channel playlist ?
@@codingwithazan2280 that's pure shit buddy
ghanta kuch research nhi kie ho
Congragulation for 6M Boss
Thank you Harry Bhaiya for providing such great playlists and videos for us.
Thanks dear sir you are literally god of us!
Mast bhai plzz cover each and every topics in this series.
Thanks for everything.
bohot important(complicated) topic ko aap bohot aacha se samjha diya . thank you The Harry Bhai🙏🙏🙏 🤩
Your have explained it very nicely and it is also easy to understand .. Thank you bro.
clear every concept.really method of explaining too gud
Amazing content... I want to complete this playlist as fast as possible without wasting my time
You are the reason that I can learn programming even while doing job. You are a gem for the programming community. LOT'S OF LOVE TO YOU AND MAY YOUR CHANNEL GROW LIKE WILD FIRE.
Bhai thoda sa hard concept tha but 2 bar dekhne pr smjh aa gya
Too much to grasp in this video. Will need to re-watch it carefully to pick all the concepts again. Thanks for making these top quality educational videos Harry Bhai.
Sir bahut sare concepts ek bar mai pda diye thoda confusion hogya ...I have to practice 😁
Ur teaching skill is very good
is waly tutorial ne to demagh hila k rakh diya
I like every video which i watch of your channel
Such a confusing video.. but at last finally i understood what was happening....
thank you ap k tutorials bhot achy sy smj a rahy hain again thank you
Analogies :-
1)display: inline-block:
It convert block element into inline and
also block so that it posses both properties so that it can give the same space to another block.
2)box-sizing: border-box:
It justify the each box inside the container and each box give the same respect to each other to apply their properties.
Very informative video sir. I learn lot from this❤️❤️
Majaa aagaya Harry Bhai, Lots of love for you. ..
Thankyou Harry well tought...... Love from Assam....
9:57 was the point where i understand the video properly
Thank you for your efforts very helpful video
Thnx for your support 👍
U shouldn't have used img for explanation of this topic, since img is inline block element. Here we can set width and height unlike other inline elements. For those who are getting confused use anchor tag and try to give width, height and margin:auto to it. And u will find u cant, so u need to convert it into block element
The gardest one yet💪 let's gooooooooo🔥🔥🔥
Well done . your lecture's are very interesting or easy to understand .I wish I came to India and join live classes
BIG THANK YOU 💗BRO LOVE FROM PAKISTAN
wonderful, wonderful, wonderful Hurra, hurra I.A.Ishtiaq
Thnx harry bhai for giving us such a amazing course
/* dekho inline block display use karne ka ek hi maqsat hai multiple blocks ko ek line me lane ke liye qki agar display block hoga to ek hi block poori line ki width kha jayega aurhum multiple blocks kahan se layenge phir aur agar inline hoga to hum width set ni kar payege to isi lie hum late hain inline block ka concept jisme ki humare elements to inline hi rahenge matlab ki pooori ek line ni khayenge aur hm width set kr skte hain width set q karna hai width set is liye karna hai q ki agar hum 4 blocks ko ek line me fit karna chahte hain to sbki width 24% krdege (ek hi baar karenge class se target krke) agar 3 blocks ko ek line me karna hai to width 33% kardenge jaisa ki harry bhai ne kiya hai and so on */
inline property wo element jo ek line me jitni bhi jaga hoti h le leta h
block element wo element h jiski width ham change kar lsakte hein aur wo block me hota h
display property ki madat se ham block element ko inline aur inline element ko block me change kar sakte hein
display: inline-block ki madat se ham inline element ko block element bna sakte hein ta k ham uski width change kar skein
box-sizing: bprder-box; karne se jo width hamne di h wohi rahe gi including margin and padding
Etni fast me thoda irritate bhhi ho gya pr koi nhi Harry bhai h apna 💖
I am very excited for this videos and i learn html and css thanks for you 🥰🤩
Congratulations sir for 3 million subscribers 👏 ❤🖤
Love from 🇳🇵
Bhaiya Thode Confuse Hogaye Thhey Na?
hum bhi bahut zyada confuse hogaye
@@kotharidhruv75 same here Bhai..
Yes iam also confused minimum 34%
gotta watch it again tomorrow, to understand it completely anyways thanks
i followed every step as harry did on vs code
It happened to the first time in this course - I have not understand anything.....
hi have you completed learning web development?
Harry sir ..pta nhi aaptk mera yeh comment poch bi payega yaa..
But me yeh kehna chahta hu ..ki aap bhut jaldi jaldi smjhate ho ..jisse new person bich bich me jroor rukta h ..jase me bi ..m
binge watching this playlist... so relevant even in 2023..
Good evening Harry Bhai
the best way to learn it is to practice along with this tutorial on vs code in the back.
6:36 "Ek chiz yahapr dekhna, jb ye bada ho jata hai na mera bohot bda,
Ek problem create karta hai." - Us bro us
YOU ARE GREAT HARRY !! Thnx a lot !
Love and respect for you harry ☺️☺️
9:46
puri puri space ly rhy hyn
repeated 3 times .... very intresting style .... 😘😘😘😘😘
point to be noted here : although img is an inline element it behaves as inline block
we can add (text-align) in header,
in this case your all item will be in center, your photo and text
so i think we don't need to add (text-align) individually.
we can put (text-align) in header.
Harrybhai you are really simple and productive
But where do you learn from?
Thank u very much Harry Bhai..
Bhot bhassad krdi bhai 🙁🙁🤷🏼♂️
Lesson No. 24
Completed
Bro what do you do with notepad++.
In this entire tutorial?
it is vscode not notepad
Ramzon la phela din sabko mubarak ho apko bhi Harris Khan bhai I mean Harry
Sir...all vidios till are best and was easy to understand...bt it was confusing for me.. the concept of display property is not cleared properly.
🌼😊😊
Best explanation
this this the only video in this play list that i feel, i got a little bit...........harry bhaai ek dm confuse kr diya aapne...
Harry bhai ye video kafi confusion wala ho gaya .
I am confuesd with display property ,box sizing.
Are Harry Bhaiya aap tou kamaal ho yaar..
matlab itna simple bana diya aapne ki kya hi bolu!
mast maja aarha hai pahunch gya 24th Tutorial pe!
Thank You Sir 😊
First lecture where I find hard to understand
This was the most confusing tutorial till date.. Seriously, this 15 minutes video took 3 hours to execute in my PC🥺
i think you not watched from starting every video is fine except this one.
@@shivamgoyal7404 I watched every single Tutorial since the very beginning..But this is very confusing..
@@sakshirao2103 actually I am doing this course as a revision rather than learning so may be it is confusing for those who are beginners.
@sakshi rao right i am also very confused 😶
1st yh watch karo then harry so u all will understand well
Thank You harry bhai
Your videos are always best
sir you are great
Thank you for this video
U made me confused in the middle 🙏🙏