CSS Tutorial: CSS Display Property | Web Development Tutorials #24

Best Hindi Videos For Learning Programming:

►C Language Complete Course In Hindi -

►JavaScript Complete Course In Hindi -

►Django Complete Course In Hindi -

Follow Me On Social Media

[amdrxxt]

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

[LOKESHPAWAR]

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.

[Moreynium]

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!

[mazharimam]

The first lecture where I felt like it's bit tough to understand 😅😅😅..

[navin]

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.

[abheysachdeva]

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

[ShadabAhmedKhan-dhnb]

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

[harshitachaurasia]

Videos that keep me awake and not giving me up!

[chiragjaiswal]

I just want to include a point that in box-sizing:border-box;
The width is calculated by adding content+padding+border(not margin).

[SLIME-gxfo]

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 <a> 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.

[utkarshpatil]

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

[g__shan]

It happened to the first time in this course - I have not understand

[xoboy]

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 .

[abhaypratap]

I continuously watched this video 4 times 😅😅, then I got it 😊👍

[minalrathi]

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.

[harshit]

For keeping the header in center, a more simple way is to use <center> tag.

[Mangesh_]

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 ❤🎉

[apoorv]

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 !

[ganeshkale]

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.

[thrilleracaste]

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!❤️