CSS Box Model - Margin, Padding & Borders | Sigma Web Development Course - Tutorial #18
HTML-код
- Опубликовано: 13 июл 2024
- Access the Sigma web development course playlist: • Sigma Web Development ...
➡️ Source Code: github.com/CodeWithHarry/Sigm...
➡️ Notes and CheatSheets: www.codewithharry.com/notes/
➡️ English Subtitles are now up for all the videos!
TimeStamps:
00:00 Introduction
00:26 Sigma Web Development Intro
00:35 CSS Box model
14:50 Margin Collapse
16:43 Conclusion
17:18 Sigma Outro
►Checkout my English channel here: / @programmingwithharry
►Instagram: codewithharry
python, C, C++, Java, JavaScript and Other Cheatsheets [++]:
Playlist: • Coding CheatSheets 🧾 b...
►Learn in One Video[++]:
Python Course with 5 Projects: • Python Crash Course in...
Python[15 Hr]: • Python Tutorial For Be...
Python Advance[3.5 Hr]: • Python Programming Cou...
Python[1 Hr]: • Learn Python In Hindi ...
Python[2 Hr]: • Python Tutorial In Hin...
Python[15 Min]: • 15 Minute Python Tutor...
JavaScript[1 Hr]: • JavaScript Tutorial
C[1.3 Hr]- • C Programming Tutorial...
php[1 Hr]: • Learn Php In One Video...
php[2.3 Hr]: • Php Tutorial for Begin...
php[Project]- • Login And Registration...
HTML[30 Min]: • HTML 5 Tutorial For Be...
CSS[8.5 Hr]: • CSS Tutorial In Hindi ...
CSS[1.4 Hr]: • CSS 3 Tutorial For Beg...
Wordpress[3.2 Hr]: • How To Make a WordPres...
Angular[2 Hr]: • Angular Tutorial in Hindi
Java[2.3 Hr]: • Java tutorial in hindi 🔥
Web Scraping[1 Hr]: • Web Scraping Tutorial ...
MongoDB[2 Hr]: • MongoDb Tutorial For B...
Numpy[1 Hr]: • Numpy Tutorial in Hindi
Android Dev[12 Hr]- • Android Development Tu...
Linux[1 Hr]: • Linux Tutorial For Beg...
JQuery[1.1 Hr]: • jQuery Tutorial For Be...
Git and GitHub[1.1 Hr]: • Git & GitHub Tutorial ...
►Complete course [playlist]:
React: • React Js Tutorials in ...
Python- • Python Tutorials For A...
OOP Python- • Object Oriented Progra...
Java: • Java Tutorials For Beg...
JavaScript- • JavaScript Tutorials I...
PHP- • PHP Tutorials in Hindi
C- • C Language Tutorials I...
C++- • C++ Tutorials In Hindi
Git & GitHub- • Git and GitHub Tutoria...
Android Dev- • Android Development Tu...
Python GUI- • Python GUI: Tkinter Tu...
Web Development- • Web Development Tutori...
Python Django: • Python Django Tutorial...
Projects Using HTML, CSS & Javascript- • Projects Using HTML, C...
Data Structure and Algo: • Data Structures and Al...
Follow Me On Social Media
►Website (created using Django Rest & Angular): www.codewithharry.com
►Facebook: / codewithharry
►Instagram: / codewithharry
Twitter: / codewithharry
Comment "#HarryBhai" if you read this 😉😉
8:49 - Many viewers have expressed curiosity in the comments regarding why the computed border appears as 1.6px instead of 2px. This discrepancy is a result of my default display scaling setting, which is set to 125% on Windows. Additionally, I have applied a zoom setting in Chrome. To view the precise border value, it is necessary to reset both the display scaling in Windows and the browser zoom to 100%. I hope this clarification addresses your queries! #SigmaBatchOp
#Sigmabatchop
#SigmaBatchOp
#SigmaBatchOp
#SigmaBatchOp #HarryBhaiThanks
#SigmaBatchOp
Harry sir we know the views and engagement are decreasing day by day and it also disheartening but please don't stop , we believe in you ,I try my best to engage in every way possible. So don't get disappointed and let's take this course to next level ❤❤
We will support him till the last ❤❤
Yes I will support till the last❤❤
I think some people get more confidence in html and css . but i injoy this course . i sure when harry bhaiya started js and react then views autometically increase .
But i request to harry bhai Please Cover html and CSS part in deep level
Full support frome me ❤❤
@@computerscout331 Absolutely that's what we want
Yes we will support till end
Harry bhai !! ! I was looking down at the inspect element code untill you said "Uper dekho Uper!! "🤣 this was the most interactive and funniest part uptill now ! Lots respect ! 🤗
Same 😂
Hi Harry, Salam. I had bought some popular web development courses in the past and watched some of the videos from them. Comparing this course with theirs, I can definitely say that Sigma Web Dev Course comes bundled with your years of experience. This CSS Margin collapse concept is one such example. In none of the courses they mentioned this, but this was such an important concept. This shows the quality of this course. This is the first time I am learning this concept. You have put so much effort for educating us. Thank you so much for the efforts and the quality content. #SigmaBatchOP
• We cannot assign multiple IDs to the element, ID of the element must be unique.
• If we set box-sizing property to border-box it means the borders and paddings are now included in the total width and total height of the element.
This course is getting interesting day by day, Harry Bhai thanks for this great course. Hum toh yeh course poora karkay hi ab aapka peechha chhorain gy. 😁😁
thanks i didnt know
Tutorial 18 done.✅
ham kisi element ko ek sei zyada id nahi de sakte.
box sizing border box matlab content + padding + border. without box sizing property sirf content ko hi height/width alot hogi. without border box property woh height/width sirf content ko alot hogi.
Kafi maza aa raha hai iss course mei. keep it up harry bhaiya.
SIGMA BATCH OP!
4:48 We can't give >1 ID to any element because IDs should be unique, as our Aadhar card numbers are unique.
Tutorial - 18 Done ✅
#SigmaBatchOP #HarryBhai
Thank you Hary bhai for this amazing course ❤
Wow. What a series. Kudos to you Harry for keeping this absolutely free. ✌
Sigma web course op ❤❤🎉🎉
Bhaiya you are great. The excitement of many people is continuously decreasing but you are uploading videos regularly. I can say with confidence that those who will learn web development from this course till end regularly will became a great web developer.
We will feel you proud after making great production level websites by learning from your course. #SigmaBatchOP #HarryBhaiyaOP
Harry Bhai, I have watched many tutorials for CSS but you are the only one who actually explained about margin collapsing, others didn't even take the name of it, this is first time me hearing this concept even after being into development for over 15 months.
Harry bhai, Thanks for explaining border-box with so much clarity, I previously had so much confusion regarding this, but not anymore. Thank you for providing this amazing content for absolutely free. forever grateful to you.
Summary of Lecture 18
1. Margin: border ke bahar ki space
2. padding: border aur content ke beech ki space
3. By default height and weight specified to an element is consist of only content. (yaani height jo denge wo sirf content ki height hogi)
4. box-sizing:border-box : when we use (box-sizing:border-box) and we give height or weight to an element then it consist of padding border and content (ab jo height denge wo content, border aur padding teeno ko mila ke hoga)
5. Margin collapse: when Margin of 2 element overlap then only one margin will be apply which is largest of the two margins .
6. ways to write (i) margin: nUnit; (ii) padding: nUnit; (iii) border: nUnite style color;
Answer of Questions:
1. No, an HTML element cannot have two id. ID is unique for an HTML element.
Lecture 18 Completed ✅
can you teach me do you put youtube logo in your comment
leikin jab border box dete hain to woh height ko content, padding aur border pe kis ratio pe divide karta hai
How you lut this logo in comment
@@shaikhnuma9101 use websites on pc there you will see emogi icon.
@@cookingstreet9362 aise put kiya
Ek(1) element mein Do(2) ID nahi di ja sakti hain kyunki yeh HTML ke Niyamon ke khilaf hai.
Agar Do(2) alag alag elements mein ek(1) hi ID di jaye toh yeh dono elements uniquely identify nahi honge.
Thank You so much Sir
for Sigma Batch 😊🥳
sorry bro i am attending the lecture after so long because suddenly i fall sick i am really sorry for that absence but i make sure from today i am not going to leave the batch #sigmabatchop thanks for your hardwork
Don't stop making such amazing tutorials. These are really helpful. Thank you Harry bhai
4:42 We cannot give more than 1 Ids to an element as it is used to uniquely identify an element just like our Adhaar Card.
Thank you so much for this amazing course. #SigmaBatchOp
abhi konse video pe pohche ?
Abhi konse video pe pohche?@@relaxgaming6393
@@relaxgaming6393 150
I wanted to express my appreciation for your dedication and hard work as my online teacher. Your commitment to our education, adaptability in the digital learning environment, and the passion you bring to your virtual classroom have made a significant impact on my learning journey. Thank you for being an inspiring and supportive teacher.
You create an awesome tutorial, with very clean neat and descriptive explanation. Keep Up the good work.Never Stop
thanks for giving so much effort to teach the concept of box-sizzing: border-box; I totally understood it :) you are the best
1. No one element will take only one id, we can't give an element more then one id, coz id will be always unique for every element.
2. box-sizing: border-box; means that a height/width of an element is equals to it's padding + border.
Thanks Harry Bhai for these course❤
#SigmaBatchOP🔥
Right
The audience is not as much as before but applaud to your dedication and motivation pls dont stop this course it is really really helpful and modern. If you are new here I really recommend this course.
Harry bahi I think u deserve billions of followers Dil sa dua ha ap ka liya 💗
KYA YAAR #harry bhai..maza aagaya ye wala lecture lekr..soo deep and clear
Please don't stop Harry sir. Please explain every concept with funny and simple example. (Mai to ab sat chorne bala nehi hu
No one can replace my coding teacher Harry bhai . We all are with you ❤
harry bhai really that the outro beats are next level, just feel like goosebumps.
bhaiya aap sabse acha padhate ho saach me ... ye concept hamesha meri friends ko pareshan krta hai lekin aapne itne ache se padhaya ki maaza hi aa gaya ekdum ...or iss playlist ko jaruur share krugi apne friends ko 👍👍
Ek(1) element mein Do(2) ID nahi di ja sakti hain kyunki yeh HTML ke Niyamon ke khilaf hai.
Agar Do(2) alag alag elements mein ek(1) hi ID di jaye toh yeh dono elements uniquely identify nahi honge.
Thank You Sir
for Sigma Batch op ☺😊
4:54 kisi element ko multiple CLASS di ja sakati hai but,
Multiple ID nahi di ja sakati because ID unique hoti hai..
Really enjoyeble and easy to understand web development course.......
#SigmaBatchOP
Thanks harrybhaiya for this amazing course :)
On the point series , teaching whats imp .
wahh harry bhai...this teaching is very high level compared to your old web development course..legendary level
I was consistent all the time during this course but last week I fell ill and was not okay for 6 days , yesterday I sat down and completed all the backlogs and now I am up to date with the course , consistency is the key , #sigmabatchop
box sizing: border box; is for height which includes content+ padding + border
Hey Harry Bhaiya, Just want to say that I recently starting following this course and man it is mind blowing! The quality is better then most of the paid course out there and you also teach extra stuff which others don't. The amount of work that you put into these videos is insane and enhances the overall experience of the course. Thank you for making this course free. I really appreciate the efforts you take to make sure we get the right information and your dedication to solve everyone's doubt. The handwritten notes as well as the notes on the website are very helpful and in detail. Once again thank you.
My first web-dev teacher ❤ and believe me the paid courses won't teach you anything extra, I've tried it all. It's been a long time, I'm looking forward to learn advanced css and react from this course 🔥
4:43 No we cannot give same ID to multiple elements.
11:38 box-sizing se border, padding element, excluding margin, element sab ki height and width jo hai vo uss specified height and width ki ho jaye gi.
15:03 Margin collapse: when Margin of 2 element overlap then only one margin will be apply which is largest of the two margins .
sir in youtube history you are the first best web developing course to easily understand
I am glad that i understood all the concepts you taught in this video..enjoying a lot in this course#sigma batch op
Day-#18 completed kon kon mere sath last Tak judega😊
box sizing : border box if not applied then actual height of an element is equal to height(given by us to that element)+upper and lower border+ upper and lower padding.
thank you thank you thank you for this wonderful course harry bhai
Thank you so much Harry Bhaiya......❤❤❤
I just never enjoyed any course that much like hell.....!!!!! ✨✨✨
⭐⭐⭐⭐⭐
Answer of the question at 4:44 is no we can't have more than one id for single element in the HTML. BTW very nice explanation by you Harry bhaiya.
can any body pls tell me the reason also pls
@@TheRahulChacha because this like the unique key of that element so every element can have only one key
Omg again one more awesome video 😊
harry bhai please dont get demotivated i am continuosly watching your videos and learn a lot ,
so please keep going with a lot of energy and so much exited,
#sigmabatchop
Very Good and In Depth
4:44 We cannot guve multiple id's to a element cuz id is different in itself and just great appreciation for applause for this course❤❤
ya
Regarding the qus 4:44 - No, we cannot use more than one ID on an HTML element. An ID is a unique identifier for an element, and each element can only have one unique identifier. Thank you so much Harry bhai. Lots of love from Bangladesh ❤
Ry8 👍 🥰
This is freakin awesome Harry Bhai, This course in underrated for real. Now I cant really say it is better than paid courses because i havent even tried one, but based on the quality, This course can easily be sold for like 2000 inr... Thanks once again Harry Bhai and I will see you NEXT VIDEO!
your video is amazing nodoubt...and at the end your line " apne gaon aur tau ki zameen mere nam kre" it makes my day.. although its night now...love you harry bhai..😃
Ek element ki ek hi ID hosakti hai as you taught us earlier that ID is unique just like our aadhar 😀 and you teaching us with full clarification So shukriya aapka Harry Bhai and one request please answer our questions so that we connect with you more and solve our doubts😊#Sigmabatchop
#SIGMABATCHOP
Sir English + Hindi == two + (so)100 😂😂
ek element ko ek hi ID hoti hai i.e. unique ID....
Thank you for your whole course.✨✨
I am consistent here without missing any video of yours from 18 days ☺☺
❤
Thank you Harry bhaiya itna sahi border sizing concept ko explain karne ke liye.
Basically agar humlog height ke baare me baat karege to toh sirf element ya content ka height hai wo. But box sizing me element , padding, border sabka add karke width or height banega
amazing course keep it going
People Are Not Engaging to this course as compared to its initial engagement . But I'm getting more interested for the upcoming videos , exercises and projects . I think it's gonna be more bigger course than 100 days of python .ps:- Harry bhai ye comment ko to shout de dijiye ❤️❤️
I'm currently in class 12th(PCB) and will watch this course again after boards. Quality Content ⚡
totally addicted to the last BGM
12:13 When box sizing = border-box, it means that height would equal to --> content height + top padding + bottom padding + top border + bottom border = 200px
Summery of the video-
1:50 box model
box contains -
content
Pading
border and
margin
4:41 Ek se jyada I'd daal sakte h.. but not a good practise.. because I'd is unique
Location (margin-border-padding-content)
Margin is outer part
Border
Padding
Content Is inner part
5:23 total height/width of element= content+padding +border+margin
Way to write margin padding border
Margin: nUNIT;
Padding: nUNIT;
border: nUnit style color;
9:56
total width /height - left/up margin + left/up border +left/up padding+ content+right/down padding + right/down border +right/down margin
10:39 box-sizing property - content+padding+border
but margin not included
13:34 margin collapse - when two nearest elements margin overlap, equivalent margin is greatest of the two element.
Rip my English 😅
#HarryBhaiOp
#SigmaBatchOP
good keep it up
#doubt
1> What if we don't want margin collapse and the elements have full margin between them?
2> Is there a thing as padding collapse too?
Then you should have to add the exact margin which you want ,
Or if you want that on any one side just use the tags "margin left" etc as harry sir described about ..
I think harry bhai is the only person in the world who teaches (a) to (z) content releated to any subject You are great Harry bhai OP person you are /.......
east are west herry vai is always best.
apke bina itna acche se course free me kar nahi pate 😄😄😄
thanku bhaiya
Sir jameen hai hi nhi ...mai kya kru😂😂
4:51
We cannot assign multiple IDs to the element, ID of the element must be unique.
Yes harry bhai rukna nahiiii
• ID can only be assigned once per element and it must be unique.
• If we set box-sizing property to border-box it means the borders and padding will now be included in the total width and height of the element.
Harry bhai you are great😍 your course has included so many important concepts and you were right about the people who are confused and don't know margin collapsing. It was asked in my interview and I didn't knew about this topic. but I have practiced CSS by making so many projects I always wonder why my padding gets added up but not margin. Thankyou harry bhai on highlighting this topic. ❤
ya phly video ha js ma mjy box model smj ai harry bhai you are a god of programming of all language
Tutorial 18 done☑
Kisi bhi element ko ek se ziada id nhi deskta
Box sizing property ka matlab hai padding + border + content. without box sizing borderbox property sirf content ko hee height milegi
Your teaching is to much cool Harry bhai❤
Id is unique of all elements and person like Aadhar card
And class like a school class
ih we give box-sizing:border-box , it means total height or width will include padding and border size
Margin Collapse ka Concept Mst Smjhaya
Thank you so much for this course #Harrybhai
#SigmaDeveloper #SigmaBatchOP - Superb Course
Great bhai
very nice tutorial sir
Box-sizing:border-box ka seedha mtlb hai ki jo height ya width di gyi woh border+padding+content honi chahiye❤
Box sizing: border box; isforheight which includes padding+ border by
Margin collapse concept cleared successfully 15:08 🎉
As a web developer I see his lectures are amazing but you have to make sure that practice is the key to success. The one who's practicing can get the benefit of this series otherwise no ways to success.
Thank you harry bhai❤
Nice examples guru ji
thank you harry bhai
Hello sir, Best Playlist
Thanku Harry bhaiya
Harry bhaiya please don't feel sad about view counts , generally people thinks that paid courses offer more but you are going to prove it false. After some time people would realize the value of this content and then your each video would have views in millions. 😊😊😊💝💖💝💖💝💖💝💖
All set Harry bhai❤
thnks harry bhai
done on 14/1/24
thnx bhaiya :)
keep going
Thank you 🙏
Hlo
Harry Bhai ❤❤Thanks For this Awesome Course.
We can't use more than one id in any element.
If we use box-sizing:border-box; it means height or width which we given includes padding and border of element with given height or width for ex if we give height:200px; it means it shows us 200px height with including padding and border of element.
id aek hi de sakte hain...
harry bhai aaj pehli bar dhang se samaj aya margin border aur padding me difference... Really ur amamzing
Imp concept in this video:-
box-sizing : border-box; --> Actual content size + padding + border.
Agar sirf height= 200px hoga toh --> sirf actual content ka hi size 200px hoga.
Thanku..
box-sizing: border-box means the height which we have assigned like 200 px then that will be of (content+padding+border) excluding margin. If it is not applied then actual content height will be what we have assigned 200px . So box-sizing: border-box changes the definiton of height
tutorial-18: done
Sigma Batch op
after completing CSS, doing revisions now
box-sizing: border-box; /* it includes padding and border and makes the total height 200px
means content + padding + margin = 200px*/
12:21 box sizing border = padding + element border 👍
Really got an ultra pro level understanding on CSS Box model
Tooo much helpful video
Answers to questions:
1.)No, we cannot give multiple ID's to any element, Id is something which is unique of 💖an element like our aadhar card number and two element can't have same id.
2.)By
height:200px;
box-sizing :border box;
It means that now the total height (content height +2(padding height) +2(border)) =200px
and shows that content height
#SigmaBatchOp
box sizing border box ---bb(abbreviation)
jo h vo content ki height ko change kr deta h
bb jab nahi lagya tha tab content height=200px thi
aur for elemnt height=content height+ padding ke sath hoti h
aur jab bb laga dete h tab
element height = height type in code
content height kam ho jati h
DAY 18 COMPLETED 🏁
#SigmaBatchOP🔥
HARRY BHAIYA OP 👥