What is Padding | Margin | Borders in CSS? - video Dailymotion

Web Artificer

In this informative and easy-to-follow video, we delve deep into understanding the crucial concepts of padding, margin, and border in CSS for web development. If you're a frontend developer looking to enhance your skills, this tutorial is perfect for you! Elevate your CSS knowledge and learn how to manipulate spacing, create borders, and improve the overall design of your web projects. Join us as we break down these fundamental elements and unlock the secrets to building visually stunning websites. Watch now and become a master of CSS styling in no time! #CSS #WebDevelopment #FrontendDevelopment #Padding #Margin #border #whatismarginpaddingandbordersincss #marginpaddingandborderincss #whatismarginpaddingandbordersincssand #viralvideo #htmlcss #margin #padding #css #olympics #border #webdesign  what is padding in css? what is margin in css? what is border in css? how to use margin in css? how to use border in css? how to use padding in css?

Transcript

00:00bismillah hir rahman nir raheem

00:04so as we have already covered our html

00:07we will cover some other things along with our posts

00:11so let's start with css

00:14css is actually used for website styling, interactive and user interface

00:20user interface, styling etc are the same things

00:25which makes website eye catching

00:28when a user downloads your website

00:31and sees that everything is perfectly aligned

00:34there are animations

00:36everything is giving you a pixel perfect view of your website

00:42so that is an eye catching thing

00:45so all those things are possible through css

00:50so today we will cover some main points of css

00:55in this video

00:57we will put our html boilerplate

00:59and in head tag

01:02we will link our style sheet

01:07style.css

01:10which is the file of css

01:13so I have put this file here

01:17from now on whatever we will do

01:20we will use external style sheets

01:24so let's write our div

01:27div element is actually a block level element

01:31block level element means

01:34an element which covers the entire width

01:37whether the element is giving 1 3rd screen width

01:42or 1 12th screen width

01:46but this element will cover the entire screen

01:50block level element

01:53span

01:56eye

01:59all these are inline elements

02:02inline elements will cover the entire screen width

02:06so let's see from the perspective of css

02:10what is the use of these elements

02:13the div element which we will use a lot

02:16the purpose of this is that

02:19we make different sections in our websites

02:22so that we can modify each section separately

02:25and make changes in it

02:28if all the content is in one place

02:31then it will be very difficult to manage it

02:34so that's why we use div element

02:37we use div tag

02:40so that we put everything in a separate div

02:43so that we can personally

02:46change different things

02:49so that the effect of one change does not come in another

02:52so first of all let's give them a class

02:55before class let's see one more thing

02:58that in css

03:01how can we

03:04target our elements

03:07and implement their styling

03:10so in css

03:13we can write the name of our tag

03:16as we saw in the previous video

03:19that we use b tag

03:22we have 4 b tags

03:25we give one b tag and style it

03:28and all the b tags get styled

03:31so in the same way we use div tag

03:34first we put some content in it

03:40div content

03:46in the same way

03:49we put content in span

03:52span content

03:55so let's implement

03:58styling on it

04:01which we will see first in css

04:04padding, margins, borders

04:07we will see these 3 things

04:10first we will see border

04:13we have borders in different varieties

04:16solid, dotted, dashed

04:19there are many other types of borders

04:22we can use our images instead of borders

04:25so first we will see

04:28we will tell it the value

04:31how much width it should have

04:34and what type it should have

04:37we use solid

04:40we tell it the color

04:43this is our div element styling

04:46in the same way we will use span

04:49we will tell it the border

04:52how much width it should have

04:55border type

04:58we use dotted

05:01border color will be blue

05:04so see this

05:07now we have div element

05:10which I told you block level element

05:13and its content is coming up to this

05:16but it has given its full width

05:19and on the other side

05:22span tag which is an inline element

05:25its content is coming up to here

05:28and if we see borders

05:31this is pixel border

05:34and this is solid form

05:37and this is dotted border

05:40in the same way we have borders

05:43now if we see

05:46what is padding

05:49so first

05:52we do

05:55padding

05:58we tell it 50 pixels

06:04we put 50 pixels on div

06:07so now if we see

06:10top, bottom, right and left

06:13everywhere it has

06:16a space

06:19like air

06:22for example

06:25we hide this padding

06:28we put our content in div

06:31we put it in p tag

06:34so that it is easy to understand

06:37what is actually in our code

06:43now we give a border to p tag

06:46p

06:49we give border 2 pixels

06:52solid

06:55green

06:58now you can see

07:01this border is attached with this

07:04green border

07:07now we use padding in this

07:10we understand the concept of padding

07:13padding we give 20 pixels

07:16now we refresh it

07:19so you will see

07:22right, left, up, down

07:25everywhere it has

07:28a space

07:31so padding will be used

07:34on external

07:37if we use it in div element

07:40if we use it in p tag

07:43it will create a space in p tag

07:46and open it

07:49we take 10 pixels

07:52now you can see

07:55this content is in p tag

07:58it is well aligned

08:01as we refresh the page

08:04it has taken padding

08:07so this is the concept of padding

08:10now we see

08:13div tag

08:16div tag

08:19by default

08:22it has taken padding and margin

08:25of html document

08:28but to clear margin

08:31we put margin in div tag

08:34let's suppose

08:3750 pixels

08:40now you can see

08:43it is in p tag

08:46we saw padding has html document

08:49but what margin does

08:52it removes the content

08:55of screen

08:58top, left, bottom, right

09:01it removes the content of screen

09:04it removes the content of screen

09:07so this concept

09:10we are using

09:13we have used margin and padding

09:16it is used everywhere

09:19the concept of margin and padding

09:22it is used everywhere

09:25but for example

09:28but i say

09:31i want margin from top

09:34so we use a property

09:37margin top

09:40margin top, margin left, bottom, right

09:43we can use all these properties

09:46but there is a solution

09:49if you want margin top

09:52so you can say

09:55we can use 4 attributes

09:58according to 4 positions

10:01top, right, bottom, left

10:04let's go clockwise

10:07we need margin from top

10:10so we give 20 pixels

10:13then we need 0 from right

10:16then we need 0 from right

10:1920 pixels from top

10:220 pixels from bottom

10:250 pixels from right and left

10:28so let's implement it

10:31so as you can see

10:34we got margin of 20 pixels from top

10:37for example

10:40we make it 200

10:43so 200 pixels from top

10:46it shows the item

10:50so this was our margin and

10:53margin and padding concept

10:56along with borders

10:59so we will meet in our next videos

11:02so take care, Allah Hafiz

What is Padding | Margin | Borders in CSS?

Category

Transcript

Recommended