CSS Box model Explained with Real Life Example | Frontend Fire Series by Coding Wallah🔥

แชร์
ฝัง
  • เผยแพร่เมื่อ 26 พ.ย. 2024

ความคิดเห็น • 40

  • @PWVGAMING
    @PWVGAMING 2 หลายเดือนก่อน +1

    Sir pura lecture Bohut achha tha you gave me confidence in box model but margin inline aapne bataya hi nahi

  • @Atif_gammer
    @Atif_gammer 2 หลายเดือนก่อน +1

    Thank you sir.❤

  • @PWVGAMING
    @PWVGAMING 2 หลายเดือนก่อน +1

    Sir please make a video on units of css like px,pc,em,rem etc because when it comes to dynamic and responsiveness i am very confused and not confident also

  • @java3021
    @java3021 2 หลายเดือนก่อน

    very nicely explained

  • @nircodecamp
    @nircodecamp 2 หลายเดือนก่อน

    Thank you sir

  • @riteshkumarrai5349
    @riteshkumarrai5349 2 หลายเดือนก่อน

    9:12 wow great sir,
    Conclusion ❤❤
    margin ya padding mai agar hum following tarike se values dalte hai toh aise sizes apply hote hai:
    1. margin : 20px; applied both horizontal and vertical direction of targeted element.
    2. margin : 20px 10px; here first 20px will applied to vertical direction (top & bottom) and 10px will applied to horizontal direction (left & right)
    3. margin : 20px 10px 5px 2px;
    Here 20px will applied to top, 10px applied to right, 5px applied to bottom side and finally 2px applied to left side like clock wise direction.
    🫡🫡🫡🫡🫡🔥🔥🔥Salute the way aap jese padha rhe ho

  • @riteshkumarrai5349
    @riteshkumarrai5349 2 หลายเดือนก่อน

    Namaste sir 🔥🔥🔥🔥❤️❤️❤️❤️❤️❤️😊😊😊😍😍. Thank you sir 😍😊😊

  • @riteshkumarrai5349
    @riteshkumarrai5349 2 หลายเดือนก่อน

    Josh full hai sir 🔥🔥🔥🔥🔥🔥 CSS Day 3

  • @avinashrai4369
    @avinashrai4369 2 หลายเดือนก่อน

    great apne bahut easily samjha diye box-model ko jisse mai aaj tak nahi samjha tha, bahut boring lagta tha😅

  • @riteshkumarrai5349
    @riteshkumarrai5349 2 หลายเดือนก่อน +1

    🔥🔥🔥Sir homework of Question 1 :
    1. Total width with margin: 250 + 15 + 5 + 20 = 290px
    2. Total height with margin: 150 + 15 + 5 + 20 = 190px
    3. Total width without margin: 250 + 15 + 5 = 270px
    4. Total height without margin: 150 + 15 + 5 = 170px

    • @Shrishantsk-b5z
      @Shrishantsk-b5z หลายเดือนก่อน +1

      Total width with margin should be 250+30+10+40 = 330 right ?? I mean sir ne video may vesa kiya tha

    • @riteshkumarrai5349
      @riteshkumarrai5349 หลายเดือนก่อน +1

      ​@@Shrishantsk-b5z You are Correct😊 my bad😅❤❤. Thanks for correction 😊👍

  • @Md__Ikbal_
    @Md__Ikbal_ 2 หลายเดือนก่อน

    nice video

  • @akashdeep-wu5vg
    @akashdeep-wu5vg 2 หลายเดือนก่อน

    Day 13🔥🔥🔥

  • @riteshkumarrai5349
    @riteshkumarrai5349 2 หลายเดือนก่อน

    🔥🔥🔥Sir homework Question 2 :
    We need to make a change in .box{
    margin-left : 150px;
    or
    margin-inline : 150px; for horizontal line left and right both
    }

  • @riteshkumarrai5349
    @riteshkumarrai5349 2 หลายเดือนก่อน

    7:31 wow computed box model se css debugging aasan ho jayega, ab sirf box-model ke diagram ko dekh ke hum bata sakte hai ki hamare element mai kitna border, margin, padding hai aur kitne direction mai hai : top, bottom, left and right

  • @avinashrai4369
    @avinashrai4369 2 หลายเดือนก่อน

    Ab mai confident hu ki Box-Model pe article likh sakta hu😍😍😍😍🤗

  •  2 หลายเดือนก่อน

  • @riteshkumarrai5349
    @riteshkumarrai5349 2 หลายเดือนก่อน

    16:23 I have one question Sir, as of now whatever you taught i understand them.
    Please correct me if i am wrong if we apply border, padding, and height - width to an element is unbalanced for e.g : if i provided
    height: 50px;
    width: 50px;
    border : 20px solid red;
    padding : 10px;
    So the overall size of an element or box is not exact 50px; because we have provided padding and border size which increases the overall size of element or box.
    To solve this issue or make the element or box balanced we provide box sizing: border-box;
    Which balance the overall size of the box by maximizing or minimizing the size of all box properties; but i saw in your window that when you applied box-sizing: border:box; the height and width of inner content gets minimized by 30px means 150 - 30 = 120px of height and width.
    So my question❓is, kya humme height or width both dena padega zisse desired overall size ban sake or kya box-sizing hamesha height or width ko hi affect karega? Kyuki usne border or padding mai manipulation nahi kiya🤔🤔🙋🙋❤️❤️

    • @piyushsharma8630
      @piyushsharma8630 2 หลายเดือนก่อน +2

      Brother, you have a very good question. Let me try to clarify it. When we apply box-sizing: border-box, it means that the border width and padding are included inside the height and width. You can think of it as the height or width being the sum of the content's height, padding, and border.
      By default, when it was set to content-box, the padding and border were not included in the height and width.
      Coming back to your question, it's not about changing the padding or border to adjust the desired height. It's about ensuring that the sum of the content, padding, and border equals the specified height, and the same goes for the width.
      I hope this clears up your doubt. If you still have any questions, feel free to ask 👍.

  • @java3021
    @java3021 2 หลายเดือนก่อน

    fire

  • @prathamgoel3386
    @prathamgoel3386 2 หลายเดือนก่อน

    Total Height : 230 px
    Total Width : 330 px

  • @java3021
    @java3021 2 หลายเดือนก่อน

    Total Width: 330px
    Total Height: 230px

  • @smsort4098
    @smsort4098 2 หลายเดือนก่อน +1

    Sir ap sahi ha but ham log apsa omid kar ka ha ki ap hamar front end 4 month mha acha sa karyanga

  • @NehaNeha-gn9sj
    @NehaNeha-gn9sj 2 หลายเดือนก่อน

    Question 1 ka Answer width 300px and height 200px

  • @SoniA.gamer.1
    @SoniA.gamer.1 2 หลายเดือนก่อน

    Aman soni present sir 🖐️ right know bhi apke hi java one short se padh raha hun sir..

    • @CodingWallahSir
      @CodingWallahSir  2 หลายเดือนก่อน +1

      🔥🔥

    • @java3021
      @java3021 2 หลายเดือนก่อน

      let's make proj together will msg u on discord

    • @SoniA.gamer.1
      @SoniA.gamer.1 2 หลายเดือนก่อน

      @@java3021 ok..

    • @java3021
      @java3021 2 หลายเดือนก่อน

      @@SoniA.gamer.1 What's ur I'd

  • @Harsh-w7z4i
    @Harsh-w7z4i 2 หลายเดือนก่อน

    Hello sir

  • @prathamgoel3386
    @prathamgoel3386 2 หลายเดือนก่อน

    Sir aisa mat kijiye, Aapke bharose hee frontend shuru kiya hai
    Ki Aap aache aache projects banvaoge
    Engineering seekhage
    How to think out of the box sikhaoge
    The main reason I admire you sir.

  • @vikashvishwakarma308
    @vikashvishwakarma308 2 หลายเดือนก่อน

    sir plz series stop mat kar dena

  • @VikkiKumar001
    @VikkiKumar001 2 หลายเดือนก่อน

    Sir i didn't get certificate 😢 but i no need that i only need skills, that learn so much Here

  • @AshikRahman-fw3sv
    @AshikRahman-fw3sv 2 หลายเดือนก่อน

    how to learn assembly language programming 2024

  • @Harsh-w7z4i
    @Harsh-w7z4i 2 หลายเดือนก่อน

    Hello

  • @smsort4098
    @smsort4098 2 หลายเดือนก่อน

    1st

  • @prathamgoel3386
    @prathamgoel3386 2 หลายเดือนก่อน

    Pratham in the comments

  • @MuhammadShoaibdeveloper
    @MuhammadShoaibdeveloper 2 หลายเดือนก่อน +1

    Sir homework of Question 1 :
    1. Total width with margin: 250 + 15 + 5 + 20 = 290px
    2. Total height with margin: 150 + 15 + 5 + 20 = 190px
    3. Total width without margin: 250 + 15 + 5 = 270px
    4. Total height without margin: 150 + 15 + 5 = 170px
    Question 2
    .box{
    margin-x: auto;
    }