This video covers everything you need to know about how CSS padding and margins work and how they can be written in your CSS stylesheets. Code GIST: gist.github.co...
Пікірлер: 164
@EdmundAlynJones4 жыл бұрын
You're like the Bob Ross of Web Dev. Thank you for posting this.
@devondambrosio49784 жыл бұрын
You just made more sense in seven minutes than the last two hours of me studying in school. Thank you!
@septic73013 жыл бұрын
ikr
@tonyaanderson2 жыл бұрын
Same!!!
@shaikhshafeen10 ай бұрын
I finally understood! Thanks a lot! That 'clock-wise rotation' words immediately cleared out my all confusions!
@rahuls38384 жыл бұрын
One of the best Tutorials out there! Thank you Steve for helping out millions of students across the globe.
@tonyaanderson2 жыл бұрын
This was the BEST explanation of margins and padding! THANK YOU!!
@sarthak13174 жыл бұрын
2:08 correction " 30 pixels "
@SteveGriffith-Prof3ssorSt3v34 жыл бұрын
Yes. Thanks. 40px would be the value if added. The actual will be 30px.
@MikixIT4 жыл бұрын
Best Tutorial Ever, thank you so much
@emmamachi78222 жыл бұрын
i've watched countless tutorials on this only to feel more confused and losing the point. you have a talent for teaching. subscribed!
@adelowokehinde58 Жыл бұрын
I know it’s been years you posted this but you’re so calm, well explanatory and you makes a lot of senses.. thanks Steve 👏🏻
@shaoyangzhang79742 жыл бұрын
Really appreciate this lecture, you are the best👍😃
@freemancity25183 жыл бұрын
Such a good explanation , it really helped me as visual learner.
@tabrezpathan15882 жыл бұрын
Love the way you teach. It’s like a master class. Thank you for this. Ricky Bubbles Julian Randy! TPB is the best!
@saheedabdulsobur5981 Жыл бұрын
Can you resize the image you are intending to use for the list-style image?? I will all appreciate your guidance. It gets bigger on my screen. Thanks
@SteveGriffith-Prof3ssorSt3v3 Жыл бұрын
If you need to style the size of the image that you are using for your list bullets then you should use a background-image and scale it as you want with li::before{ }
@saheedabdulsobur5981 Жыл бұрын
@@SteveGriffith-Prof3ssorSt3v3 thanks so much steve
@khanayan-v7z2 жыл бұрын
Thank you so much steve, the way you explained was so simple and understandable!
@soulofsong75183 жыл бұрын
you have amazing relaxing sound .
@jiriorsag61842 жыл бұрын
Best tutorial, totally clear 👌 Thanks!
@smailsafire95933 жыл бұрын
This is the best explanation in the internet for margin and padding, thank you Steve for the lesson.
@UriAlexandrovitz12 жыл бұрын
Excellent video! short yet very coherent
@ripcrypto51892 жыл бұрын
I love the fact you actually go straight to the point i know this was 1 year ago but this actually still helped me a LOT i was like “What the hell is margin and padding? But then i saw this thanks a lot ❤
@nichoalaz62353 жыл бұрын
Hey thanks man! as someone whos only recently started learning HTML and CSS this video was really helpful.
@MobilTemp3 жыл бұрын
Great work
@shubhsagar62344 жыл бұрын
Now i an actually understanding css coz of you... Hope to complete whole playist thus week :)
@karamhassan68844 жыл бұрын
Anyone agree that Steve's voice should be part of siri /google assistant?
@Moarmmoforme2 жыл бұрын
Short, concise and to the point. Much obliged kind sir!
@lamokcm2093 жыл бұрын
i've been trying to get padding and margin for the last 2hours but this video made the understanding much easier in less than 5mn ! thanks a lot
@deiraraj45473 жыл бұрын
Thanks for posting this.....It was very helpful... : )
@espritcontemplatif79652 жыл бұрын
Uncountable thanks! Extremely Helpful.
@Iamgayathrinagarajan4 жыл бұрын
Just started learning..its so useful..Thank you
@sugabts32933 жыл бұрын
wow you shoud a teacher the way u explain things very smooth
@SteveGriffith-Prof3ssorSt3v33 жыл бұрын
I am a full-time professor. :)
@sugabts32933 жыл бұрын
@@SteveGriffith-Prof3ssorSt3v3 lucky students
@MuhammadZubair-xw2pf2 жыл бұрын
Wow. Now i understand what is difference b/w them. Thanks
@RedBaron191802 жыл бұрын
I actually fucking love you thanks for the video mate
@damo1903 жыл бұрын
Nice video Steve. I have difficulty in understanding the margin collapsing in nested block elements and with negative margin, I can't understand how the position of blocks change. Example, div{border:1px solid blue;} .container{background-color:yellow; margin:40px;} .box{background-color:orangered; margin:40px; } change margin When I added "margin-top: -50px;" to .box selector, I can't understand how two boxes position changes than before when I didn't change the margin. I checked without border too for margin collapsing, but couldn't understand. Please make a video on this topic.
@SteveGriffith-Prof3ssorSt3v33 жыл бұрын
Negative margins are actually quite rare. They used to be used a lot with float to create columns. Now people use flexbox and grid to accomplish this. Try this CSS to see if it makes more sense: .container { background-color: yellow; padding: 40px; margin: 40px; } .box { background-color: orangered; padding: 0; margin: -40px 40px 40px 40px; }
@ridoanuddin33782 жыл бұрын
Thanks a lot. Appreciate it much, Brother.
@ersaix01802 жыл бұрын
no quetions only RESPECT. Thanks a lot
@lordphoenix58273 жыл бұрын
Really good Tutorial. it was awesome.
@fahadibrahim72683 жыл бұрын
amazing explanation, opened a locked door for me as a beginner. Thank you
@newworld42522 жыл бұрын
Woww oh my God.i got the whole of it in minutes.. Thank you bro
@markzait2750 Жыл бұрын
Very useful video. Thank you!
@madhumad13972 жыл бұрын
great... understood clearly. thanks!
@master-ik9ro Жыл бұрын
wow i think i understand frontend now haha!!! Thanks!!!
@haoql.76862 жыл бұрын
Very enjoyed watching this video while learning a lot as well
@bljelena903 жыл бұрын
This makes so much sense now thank you.
@samirarfaoui87024 жыл бұрын
dude
@minercreepmc3 жыл бұрын
Why margin top/bottom do not get add to each other but left/right do, sir. Ex: If two of this top on each other .one{ margin-bottom: 20px} .two{margin-top:10px} So the margin between these will be 20px But if those sit next to each other .one{mg-right:10px} .two{mg-left:20px} Then margin between them will be 30px I read that margin top bottom will not be added, but left right they will. But I still a little bit confuse
@SteveGriffith-Prof3ssorSt3v33 жыл бұрын
Top and bottom margins collapse. They overlap and the larger value is used.
@benzflynn3 жыл бұрын
1. Don't forget defaults and inherits. Unless specified otherwise here www.w3schools.com/cssref/css_default_values.asp the default margin and padding will be zero. 2. Where an element has a default property value, e.g. has a default _padding-left: 40px;_ : here you must override it explicitly, e.g. _nav ul { padding: 0; }_ to establish it otherwise.
@SteveGriffith-Prof3ssorSt3v33 жыл бұрын
I do not trust anything from w3schools. They have been found to have erroneous information or be missing key items far too often. Yes, elements have default values. The default values are not always the same in all browsers. That is why there have been so many CSS reset and normalize stylesheets created. Many elements will have non-zero default values for padding and/or margin. I will typically add my own reset values for padding and margin to zero them out and then only add the specific values where and when I want them. However, this video is only about how margin and padding work as part of the box model not default values or best practices for CSS. I have another video on specificity - kzbin.info/www/bejne/gavChGeEoJmkr6s and another about the Cascade where I talk about inheritance - kzbin.info/www/bejne/hprKqYKvi6l8h8k
@tanvirh77072 жыл бұрын
thank you, sir. that was really helpful
@armyteguh26495 жыл бұрын
really Love, nice, and what a great explanation... but sir, can i fill the value with %, rem, em, or we have to fill it with number only ?? and thanks in advance sir...
@SteveGriffith-Prof3ssorSt3v35 жыл бұрын
You can use any unit you want.
@devohnmitchell2 жыл бұрын
Thanks Sir..!! 👍👍👍👍
@elgunmhrrmov7672 Жыл бұрын
thank you so much for details
@notsphinxz Жыл бұрын
What's for the Margin when you make another space at the top right bottom and left? Like Is it overlapping by its default then you type margin 10px on the screen. And I want to know more about margin and padding I am practicing at it.
@SteveGriffith-Prof3ssorSt3v3 Жыл бұрын
I don't understand your question.
@mathmatikapret57123 жыл бұрын
Thank you very much bro
@away65453 жыл бұрын
idc how old this video was. But it makes sense
@damo1903 жыл бұрын
Do margin collapse happen in relatively positioned element? I didn't see such case. MDN only mentions margin collapsing won't happen in absolutely positioned element.
@SteveGriffith-Prof3ssorSt3v33 жыл бұрын
The margin collapse is applied only to the original space for the element. With relative positioning, the original space is saved, the element gets removed from the page while the rest of the page is built, and then put back in the original position with any translations with transform, top, left, etc.
@soulofsong75183 жыл бұрын
thank you so much great video
@weareeternal32302 жыл бұрын
Thanks! love your voice
@ek524810 ай бұрын
It is pretty clear. Thanks
@aneunjieroine31693 жыл бұрын
Thanks Sir it really helpful
@topeakanji49422 жыл бұрын
Pls is padding possible without changing the size of the outer div, if not, how can u move the text without changing the outer div size, thanks
@SteveGriffith-Prof3ssorSt3v32 жыл бұрын
The size of the box is the sum of margin, border, padding and width. If you want to make one bigger without changing the size of the box then one of the other values must change. The relationship of the width to the other values can also be altered with the box-sizing property.
@hussein3942 жыл бұрын
your sound prefect
@websurferwizard3 жыл бұрын
Hey steve, do you have a tutorial on how to set up Brackets? Just like you have it. I'm confused.
@SteveGriffith-Prof3ssorSt3v33 жыл бұрын
I switched over to VSCode in 2018 and haven't used Brackets since then. I highly recommend that all my students do the same. Emmet is built into VSCode. Here is a video about VSCode - kzbin.info/www/bejne/fKm1c52dicyomtk I did make this video about Brackets back in 2017 - kzbin.info/www/bejne/r5PPfmhsot1lg7c
@spagetti25144 жыл бұрын
hello sir i am having an issue compressing them vertically , i have the list of my audio files inside my body tag with margin , but i cannot compress them to become closer .. my example would be the white lines inbetween all of your blue boxes but so much larger , please help me out bro much appreciated
@SteveGriffith-Prof3ssorSt3v34 жыл бұрын
Every tag has the box model box around it. If you have space then you have padding or margin around some element or you have large line height. Use the dev tools in chrome to investigate
@sameerisonvacation3 жыл бұрын
Aww! Awesome 💗 thanks Man
@96642911563 жыл бұрын
thank you sir for this video
@shankarbaddi44243 жыл бұрын
Best explanation ever...
@kosaygobran3 жыл бұрын
woooow u made me understand it now
@chum24702 жыл бұрын
Your voice is so calming
@My-video1233 жыл бұрын
At last I understood! tnx
@hiroimitsuna73013 жыл бұрын
appreciate your work!
@devT44 Жыл бұрын
While checking in MDN, I found that margin-top and margin-bottom have no effect on non-replaced inline elements. What are these replaced and non-replaced elements, can u explain in your video?
@SteveGriffith-Prof3ssorSt3v3 Жыл бұрын
developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element replaced elements are elements whose content is not impacted by your CSS - video, , img, etc. inline vs block elements - can be explained through this video - kzbin.info/www/bejne/i3O6nWZth9dslcU
@devT44 Жыл бұрын
@@SteveGriffith-Prof3ssorSt3v3 thank you.
@DSureshKumar3 жыл бұрын
I subscribe your channel because you made this video very informative. Plz use this teaching skills in all your video. From my side you are 10/10.
@grounds5852 жыл бұрын
got a eloquent voice
@krishnamohanyerrabilli40403 жыл бұрын
thanks for that dev
@bigwilly44972 жыл бұрын
thank you so much!
@Hieucd973 жыл бұрын
Great video! What about negative values for margins and padding? Would it just go beyond the space? If I set my padding values to negative, would the words go outside of the blue box?
@SteveGriffith-Prof3ssorSt3v33 жыл бұрын
Negative padding doesn't work but negative margins will pull the box in different directions.
@Hieucd973 жыл бұрын
@@SteveGriffith-Prof3ssorSt3v3 Thank you! I'm new to HTML and was confused with margins and padding when I put in negative values
@hafsahmr90103 жыл бұрын
Thank you so much!
@leonardmbibi80132 жыл бұрын
Great! Aptly put.
@vivekhiremath18422 жыл бұрын
really helped me a lot
@dr.simonius6092 жыл бұрын
Perfect thanks
@ycombinator7653 жыл бұрын
Awesome bro❤️❤️👍
@akshatlahkar2 жыл бұрын
Thank you sir
@thamodaran69984 жыл бұрын
Crisp and clear
@ahmedel-hindawi92263 жыл бұрын
love your accent
@ryanakers36785 ай бұрын
God bless you
@salehalnahdy87713 жыл бұрын
very much appreciated..thank you for your enlightenment :D
@boisauce11312 жыл бұрын
5:45 bars my dude
@zakhariihusar69753 жыл бұрын
Thanks. I"ve just begun and it helped me to adjust text in a list in a centre of the background picture!
@argenisaguilar90453 жыл бұрын
Thanks so much
@rohitram56922 жыл бұрын
THANK YOU BRO
@IndianGaming02084 жыл бұрын
Best video 👍👌
@elixr86024 жыл бұрын
Thanks Steve
@ahmedkafass97933 жыл бұрын
Thanks a lot 💚
@dilshankumarage64624 жыл бұрын
Thank you 👏
@TheDQR3 жыл бұрын
You're great pal, great explanation, your very calmed voice made me put more attention, great video.
@davidmp1703 жыл бұрын
Thanks a lot!
@anAwesomeNameHere Жыл бұрын
Thanks a lot
@aguycreates19002 жыл бұрын
Thanks sir!
@harshalsurwase21853 жыл бұрын
i don't have left any confusion about padding and margin after watched this.
@aramkhoshnaw2291 Жыл бұрын
thanks
@devil-rg6fs2 жыл бұрын
Thanks
@nameless71582 жыл бұрын
whats the name of this coding progrsmme?
@SteveGriffith-Prof3ssorSt3v32 жыл бұрын
Brackets is the IDE that I used before switching to VSCode.