hello guys welcome once again in the last blog I have shown you how to use CSS with your HTML code and I have given you some example by which you can style your web page now in this blog I will show you what is box model in CSS so I have a basic body of HTML head and this style I have shown you in the last blog and I deleted all the style code between this and what I have right now is I have the image tag in from which I am showing the image this I have shown you in the previous blogs how to show the images and I have the dev tag this is new dev tag is a division of something so dev tag divides your whatever inside this from the other code so this is division tag so this you can use also for dividing one tag from other tank now I am showing the HTM this HTML dot PNG file and this dev paragraph for example so just save it and run the code and my code looks like this so only the image and this sentence now I want to show this div tag whatever this content in in the tag I want to give some padding or margin to this tag so what is padding margin or all this so this you can imagine as a content of your tag or this is a box if you can imagine this content as a box I will make it easier to imagine so this is the content in which your dev tag is there so this is the div tag and what you will provide is this padding this padding gives some space around your tags or your box and the border this is the border so after border comes after padding comes the border and after border comes the margin so you you can style your content like this also you can provide the padding to your content you can provide the border to your content and you can provide margin also to your content so how can you provide these things with the help of your CSS code I will show you so first of all in this style tag you want to provide this style to our div tag right so here you will write dip which is this dip and dot the name of the class you can class give in the name of the class as I am anything for example e^x and give space and these curly braces and you can give the space here also right and to this deep content I want to provide the margin the padding and what was the other thing border yeah margin border and padding to this div content so what I will do here is inside this property class or your style class this one the inside these brackets just write this so you are providing the bit to your div tag width is for example 220 pixel you're providing padding to your div tag which is 10 pixels you're providing border to your tip tag which is 5 pixels solid gray border so this also a here you are seeing that you can provide the property and the value and you can provide more than one values at the same time by separating them with her space so 5 pixel border is solid and border is gray ok so these three values to one property you can provide a tough time and margin I want to provide first I want don't want to provide any margin and after running this code we will provide some margin to the code so just save it and run the cord and it doesn't look like anything is not happened I think why we see here yes because we haven't provided this class to this div so what do you need to do is just make a space in this dev tag and the right class is equal to double quotes and your name of the class which is e^x right so give the name here and now save the program and now let's see yes it has provided the margin - you're not a margin margin was zero but the border do your div content the padding to your dev content and now let's provide some margin also so margin for example you want to provide 10 now how it looks like let's see I will just refresh this page and if you can see here on the left hand side there is a margin this from this border to this corner there is a margin so this is the margin we have provided let's increase this margin to 50 then it will be more visible so 50 save and run once again now you can clearly say that there is a margin to the left side right so in this way you can use a box model of CSS with your HTML code and this will be helpful for when you are designing your code and you want to provide different blocks to your web page so I hope you have enjoyed this blog
0 Comments