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 ❤🎉
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
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.
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.
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 .
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.
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
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
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
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
/* 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
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.
If You want to center an inline element, make it block using display: block; set its width and set margin: auto. inline-block means the element will behave like inline but inside block elements can be present, we cannot use only inline for this case.
DISPLAY PROPERTY: It is used to control the layout and visibility of an element. It can have various values, including: - `block`: Displays the element as a block-level element, starting on a new line. - `inline`: Displays the element as an inline element, on the same line as surrounding elements. - `none`: Hides the element, making it not visible on the page.
display block hai toh puri width lega margin auto par chezze center par aajayegi aur agar auto karne par nahi aah rhi toh width kuch leelena inline meh margin auto nahi lagega
Please post a video for serial vise courses playlist. I mean which course playlist to access at what time . Your video tutorials are absolutely amazing and helpful, god knows why these highly paid courses are still free.
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
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.
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😂
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
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 ❤🎉
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 ?
Watching it twice made sense 😀
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 ?
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 !
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
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'
Thank you so much Harry bhai i have solved my display property issue after watching your this video very easily.
harry bhai asaan cheezein bohat ache se samjhayi, mushkil cheezein jaise pehle thi, ab bhi vaise hi rahi hai, ache se samjhao bhaijan.
I continuously watched this video 4 times 😅😅 , then I got it 😊👍
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.
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.
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
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.
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
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.
Best of best explaination Harry bro...accessing this video second time for better understanding of display proeprty❤🎉..got it deeply
Harry Sir... Mai Playlist Ko Save kr liya hui...
Kafi mast lag raha sir ji... aapka lectures
Bahut bahut dhanywaad aapka...
Thank You Sir Very Helpful 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
Amazing content... I want to complete this playlist as fast as possible without wasting my time
CSS king Harry Bhai...proved
mind blowing harry bhai but please explain slowly🥲 by the way nice video
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.
The gardest one yet💪 let's gooooooooo🔥🔥🔥
ab mzaa aane lga ek no bhai
Thank you Harry Bhaiya for providing such great playlists and videos for us.
bohot important(complicated) topic ko aap bohot aacha se samjha diya . thank you The 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.
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
Sir bahut sare concepts ek bar mai pda diye thoda confusion hogya ...I have to practice 😁
Mast bhai plzz cover each and every topics in this series.
Thanks for everything.
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
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
Very informative video sir. I learn lot from this❤️❤️
Ur teaching skill is very good
thank you ap k tutorials bhot achy sy smj a rahy hain again thank you
9:46
puri puri space ly rhy hyn
repeated 3 times .... very intresting style .... 😘😘😘😘😘
clear every concept.really method of explaining too gud
Thanks dear sir you are literally god of us!
Well done . your lecture's are very interesting or easy to understand .I wish I came to India and join live classes
Bhai thoda sa hard concept tha but 2 bar dekhne pr smjh aa gya
Congratulations sir for 3 million subscribers 👏 ❤🖤
Love from 🇳🇵
/* 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
Your have explained it very nicely and it is also easy to understand .. Thank you bro.
Congragulation for 6M Boss
I like every video which i watch of your channel
6:36 "Ek chiz yahapr dekhna, jb ye bada ho jata hai na mera bohot bda,
Ek problem create karta hai." - Us bro us
I am very excited for this videos and i learn html and css thanks for you 🥰🤩
Majaa aagaya Harry Bhai, Lots of love for you. ..
Such a confusing video.. but at last finally i understood what was happening....
Etni fast me thoda irritate bhhi ho gya pr koi nhi Harry bhai h apna 💖
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.
Love and respect for you harry ☺️☺️
Thnx harry bhai for giving us such a amazing course
9:57 was the point where i understand the video properly
If You want to center an inline element, make it block using display: block; set its width and set margin: auto.
inline-block means the element will behave like inline but inside block elements can be present, we cannot use only inline for this case.
point to be noted here : although img is an inline element it behaves as inline block
YOU ARE GREAT HARRY !! Thnx a lot !
Thank you for your efforts very helpful video
Thankyou Harry well tought...... Love from Assam....
BIG THANK YOU 💗BRO LOVE FROM PAKISTAN
i followed every step as harry did on vs code
wonderful, wonderful, wonderful Hurra, hurra I.A.Ishtiaq
the best way to learn it is to practice along with this tutorial on vs code in the back.
is waly tutorial ne to demagh hila k rakh diya
Thnx for your support 👍
4:25 display:block , inline
gotta watch it again tomorrow, to understand it completely anyways thanks
Your videos are always best
DISPLAY PROPERTY:
It is used to control the layout and visibility of an element. It can have various values, including:
- `block`: Displays the element as a block-level element, starting on a new line.
- `inline`: Displays the element as an inline element, on the same line as surrounding elements.
- `none`: Hides the element, making it not visible on the page.
Ramzon la phela din sabko mubarak ho apko bhi Harris Khan bhai I mean Harry
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 So Much Sir 😍❤️
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...
Thank u very much Harry Bhai..
display block hai toh puri width lega
margin auto par chezze center par aajayegi
aur agar auto karne par nahi aah rhi toh width kuch leelena
inline meh margin auto nahi lagega
binge watching this playlist... so relevant even in 2023..
Thank You Sir 😊
Please post a video for serial vise courses playlist.
I mean which course playlist to access at what time .
Your video tutorials are absolutely amazing and helpful, god knows why these highly paid courses are still free.
Harry Bro Yeh Video Confusing Tha... Make It Again If Possible.. Btw Your Videos Are Very Helpful..
Fabulous bro.. but make a video on connecting html form page with database. I got better understand in your way to explain. 😊
U made me confused in the middle 🙏🙏
Harrybhai you are really simple and productive
But where do you learn from?
Thanku so much giving me important knowledge 🙏
Good evening Harry Bhai
Best explanation
5:35 inline element mai width set nahi kar saktay but apne bina display block kiye mai width set kari hai
Is tag is exception
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.
🌼😊😊
Harry bhai ye video kafi confusion wala ho gaya .
I am confuesd with display property ,box sizing.