CSS Layouting - #5 Box Model : Padding, Border & Box Sizing

Поділитися
Вставка
  • Опубліковано 31 січ 2025

КОМЕНТАРІ •

  • @dolphy3843
    @dolphy3843 5 років тому +70

    thank, disini saya berani untuk menonton iklan sampai selesai demi untuk memajukan pembelajaran pemrograman dari kang shandika galih!

  • @dwikailham7984
    @dwikailham7984 3 роки тому +10

    kalau saudara atau teman kalian mau kuliah jurusan IT mending disaranin kuliah di channel ini, asli mantap materinya lengkap sekali sama ky di kampus, dan penjelasanya sangat mantap

  • @fauzialwanuh3592
    @fauzialwanuh3592 3 роки тому +10

    when pa sandhika said: terimakasi sudah menonton video nya
    aku: harusnya kita lah pa yg terimakasih udh dibuatin videonya

  • @mjazulicmiiw
    @mjazulicmiiw Рік тому +3

    Makasih pak.
    Padding: jarak diantara conten (text, gambar, dll dalam box) dengan border (pinggiran box/objek)
    Padding: tidak bisa dikasik negatif atau auto
    Padding merubah ukuran box yaitu bertambah sesuai nilai peding yg diberikan. Misal awal box dengan ukuran lebar dan tinggi 300px, setelah dikasik pading semua sisi 50px (kanan-kirik yaitu 50px + 50px = 100, begitu juga bawah atas)
    Sehingga 300px + 100px, maka box berubah menjadi ukuran lebar dan tinggi yaitu menjadi 40ppx
    Border, garis tepi dari box.
    Penulisan
    border = width style color, atau
    Border-left = value
    Boder-style = style (solid/ dotted/ dashed/ double)
    Border-color = red/blue/dll
    Contoh:
    Boder = 1px solid blue;
    Border itu merubah ukuran box sebagaimana padding di atas, artinya ketika kita ngasik border maka ditambahkan nilai tersebut termasuk kanan+kiri, atau atas+bawah

  • @Wilydesu
    @Wilydesu 2 роки тому +22

    Definisi = 0:43;
    Menulis padding = 3:03
    Pengertian padding = 3:34;
    Padding tidak bisa diberi nilai - = 4:16
    Border = 6:40;
    Cara nulis Border = 7:36;
    Agar satu sisi = 8:44;
    Box sizing = 10:37;
    13:54;

    • @faizaqilmajid6179
      @faizaqilmajid6179 2 роки тому

      kerenn

    • @aakdennissrihard764
      @aakdennissrihard764 2 роки тому

      Mantap
      Terimakasih

    • @muhammadanshari3010
      @muhammadanshari3010 2 роки тому

      mau nanya dong bro
      box-sizing: border-box; ada masalah, saya sudah mengikuti tutorial di video ini tapi hasil box pada browser tidak sama rata, padahal di inspect width nya udah sama 600px
      saya harus bagaimana?

    • @Wilydesu
      @Wilydesu 2 роки тому

      @@muhammadanshari3010 Update browser ke versi yang baru.
      Coba lihat dibeberapa browser, chrome,edge, Mozilla.
      Atau pake cara reset.
      *{
      Box-sizing:Border-box;
      }
      Kalau di inspect,ukurannya bener berarti ga ada yang salah,coba browsernya jangan terlalu di zoom, biarin di posisi 50%.
      biar lebih jelas,kirim source codenya.

    • @muhammadanshari3010
      @muhammadanshari3010 2 роки тому

      @@Wilydesu terima kasih bang

  • @intanadinsetiawan3796
    @intanadinsetiawan3796 3 роки тому +4

    Terimakasih, bicara nya jelas tidak belibet jadi ya ngga buat bingung dan pusing, mudah dimengerti 👍 yg kaya gini ni seharus nya banyak share di sosmed sana sini, berfaedah. Terimakasih sekali lagi

  • @rifpol3221
    @rifpol3221 3 роки тому +9

    saya marathon seminggu ini udah jalan html css dan skrg lagi otw yg ini episode ke 6 , alhamdulliahh lancar dan pahamm, terimakasih pak dhika, smoga amal baik buat bpk. xD

  • @offaluwais3081
    @offaluwais3081 5 років тому +11

    Alhamdulillah videonya sangat bermanfaat sekali.. Semoga pak sandika diberikan kelancaran rizki dan kesehatan selalu.. Amiinn

  • @hafidzibrahim6747
    @hafidzibrahim6747 4 роки тому +8

    untuk saya pribadi sangat sulit untuk mengatur padding dan margin pada box model. krn bentuknya yg transparan sebelum di kasih css. tp berkat ilmu yang di ajarkan Pak Sandika, akhirnya saya dpt membedakan mana padding dan mana margin. terima kasih Pak 🙏😊

  • @mahmudbrutu
    @mahmudbrutu 6 років тому +5

    Ya Allah kang saya doain ilmu akang bermanfaat bagi kami yang masih belajar, terima kasih
    sehat terus kang dan terus berkarya

  • @dedshfan
    @dedshfan 6 років тому +4

    Terimakasih pak dika, atas jasa anda telah mau menjadi Guru saya di internet :) jadi gemes pencet iklan di setiap vidio anda

  • @tonzy5229
    @tonzy5229 3 роки тому +4

    Terimakasih pak, semoga kelak saya dapat melewati ilmu anda, anda sangat berjasa dalam pembelajaran saya, semoga Tuhan membalas kebaikanmu dan semoga selalu dalam lindungan-Nya

  • @riskisetior8271
    @riskisetior8271 7 років тому +1

    Tutorial yang bermanfaat, saya yg tidak pernah paham sama sekali mengenai Border akhirnya paham dan bisa mengembangkan sesuai sesuka hati saya.

  • @mesakhlolo8611
    @mesakhlolo8611 3 роки тому +2

    14/09/2021
    terima kasih pak ilmunya. saya lanjut marathon series ini dulu.

  • @clipmakerzaq8033
    @clipmakerzaq8033 3 роки тому +1

    semua materunya terstruktur jelas dan padat...terimakasih mas andika

  • @mandikaptech7171
    @mandikaptech7171 Рік тому

    Masya Allah luar biasa materinyaaaa...waktu kuliah gak sedetail iniiii

  • @yoru1230
    @yoru1230 3 роки тому +1

    Simple,padat dan jelas best lah pokoknya

  • @codeliterasi
    @codeliterasi 3 роки тому

    ini guru ku, sukses terus buat kang shandika galih

  • @bilton7242
    @bilton7242 3 роки тому +2

    asli materinya sangat bagus pak, sebelumnya terimakasih banyak

  • @Taufik-t8l
    @Taufik-t8l 2 місяці тому

    Terima kasih pak, sangat sangat bermanfaat, sungguh muda di pahami

  • @ceritabocil20072
    @ceritabocil20072 3 роки тому

    Terimakasih Pak atas materinya , semoga rejeki bapak lancar terus .

  • @sofyanekosanjoyo8091
    @sofyanekosanjoyo8091 2 роки тому

    Kereeennn.... Terima kasihhhh Pak Sandhikaaa.... Dosen saya....

    • @muhammadanshari3010
      @muhammadanshari3010 2 роки тому

      mau nanya dong bro
      box-sizing: border-box; ada masalah, saya sudah mengikuti tutorial di video ini tapi hasil box pada browser tidak sama rata, padahal di inspect width nya udah sama 600px
      saya harus bagaimana?

  • @wsnkurn
    @wsnkurn 9 років тому +7

    Videonya bagus-bagus. bagus untuk orang seperti saya yang masih beginner di front end.

    • @SandhikaGalih
      @SandhikaGalih 9 років тому +2

      +wisnu kurniawan terimakasih, senang bisa membantu.. yuk kita sama2 belajar :)

  • @clwbola4826
    @clwbola4826 Рік тому

    terpaksa harus ngulang css dari dasar, smoga lewat chanel ini aku bisa belajar banyak untuk dikemudian hari bisa jadi programer dan bisa ngehasilin duit sndiri aminn

  • @fajar312
    @fajar312 8 років тому +3

    terima kasih om ,,,sudah paham terima kasih,,tinggal implementasi nya saja :)

  • @aldyckybagus70
    @aldyckybagus70 4 роки тому

    makasih kang, panjang umur hal2 baik.

  • @budi-dev8814
    @budi-dev8814 4 роки тому

    Mantap kang, izjn download yakk hehe, kalau masalah iklan tenang aja kang, udh dilihat hehe

  • @donpedro-vz6pe
    @donpedro-vz6pe 5 років тому +2

    mantap bang thanks ilmunya, semoga sukses ya bang

  • @iimibrahim2135
    @iimibrahim2135 4 роки тому

    Sangat bermanfaat ilmu nya kang🙏.

  • @rezaammar7447
    @rezaammar7447 2 роки тому

    Jazākallah Khairan pak🙏

  • @noakmansnandifu3671
    @noakmansnandifu3671 3 роки тому

    makasih pa, sangat bermanfaat pembelajaran ini..!

  • @sweetmimosa3917
    @sweetmimosa3917 6 років тому

    Pak Dika di video sebelumnya untuk pemakaian auto pada margin syaratnya harus kanan dan kiri..
    margin-left: auto;
    margin-right: auto;
    Tapi kok barusan di menit 02:15 Pak Dika langsung gk masalah...
    margin: auto;

    • @sandhikagalihWPU
      @sandhikagalihWPU  6 років тому

      margin: auto; artinya di ke-empat sisinya otomatis dikasih nilai auto..

  • @AnakinSkywalker-fz5zq
    @AnakinSkywalker-fz5zq Рік тому

    terima kasih untuk ilmunya pak dosen

  • @herbalobatmatamakmursentos3684

    sekali lagi makasih ilmunya pak

  • @WordP1023
    @WordP1023 3 роки тому

    thanks kk Dika

  • @bimaprawangsaputra2005
    @bimaprawangsaputra2005 Рік тому +2

    Bismillah saya start css 19/01/2024, Tunggu saya bulan/tahun depan!

    • @hafidhrazzaaq9879
      @hafidhrazzaaq9879 Рік тому

      Bismillah kita sama memulai bro

    • @farwasalira2786
      @farwasalira2786 9 місяців тому

      bismillah, semoga konsisten

    • @Bang_All12
      @Bang_All12 4 місяці тому

      Gimana sekarang bang

    • @bimaprawangsaputra2005
      @bimaprawangsaputra2005 4 місяці тому

      @@Bang_All12 aku udah bales dikomen yang lain bang, alhamdulillah sekrang status magang front end, udah sampe akhir Next Js

    • @Bang_All12
      @Bang_All12 4 місяці тому

      @@bimaprawangsaputra2005 keren mas, kalau saya baru² ini terjun kedunia computer, jadi masih rada bingung apalagi kalau ngoding html css😅😅, ya mungkin kalau sering belajar lama lama bisa😅😅

  • @aakdennissrihard764
    @aakdennissrihard764 2 роки тому

    Terimakasih Pak atas pembelajarannya

  • @herbalobatmatamakmursentos3684

    padahal kalo gw tahu chanel ini dari dulu pasti gw udah jago keknya deh. wkwkwk

  • @irfankurniawanS
    @irfankurniawanS 2 роки тому

    meninggalkan jejak pak

  • @tanjungmardiansyah2426
    @tanjungmardiansyah2426 4 роки тому +1

    Terima kasih pak sudah bagi pengetahuannya, secara umum saya saya paham dengan apa yang dimaksud tetapi ada sedikit pertanyaan, dari definisi border yang disampaikan adalah batas disekeliling content dan padding (00:42) dan gambar box model (00:25), letak border disisi dalam margin tapi kenapa pada prakteknya ketika terdapat padding dan margin serta diberikan border letak border terdapat disisi luar margin, tolong penjelasannya, terima kasih...

    • @sandhikagalihWPU
      @sandhikagalihWPU  4 роки тому +1

      bisa kasih contoh codenya?
      karena harusnya margin itu berada di luar border

    • @tanjungmardiansyah2426
      @tanjungmardiansyah2426 4 роки тому

      @@sandhikagalihWPU maaf pak, ternyata benar pak border berada disisi dalam margin, setelah saya coba, mungkin karena contoh yang diberikan margin berada ditengah dan saya kurang teliti ketika diberikan property border terkesan berada dibagian luar margin, selain itu karena margin tidak memiliki warna sehingga tidak terlihat bahwa ada margin setelahnya, sekali lagi saya mohon maaf, dan terima kasih atas tanggapannya maklum saya masih baru belajar, terima kasih...

    • @sandhikagalihWPU
      @sandhikagalihWPU  4 роки тому +1

      Semangat terus belajarnya! 👍🏼

  • @dhimasbudiarso6132
    @dhimasbudiarso6132 4 роки тому

    Terimakasih atas ilmunya

  • @kuffa1241
    @kuffa1241 2 роки тому

    maaf pak hanya bisa memberikan tidak skip iklan...

  • @rinaparkjiyeon7047
    @rinaparkjiyeon7047 4 роки тому

    Terima kasih atas ilmunya pak, cara menjelaskannya mudah di pahami

  • @priapunyakarya
    @priapunyakarya 6 років тому

    Bermanfaat sekali pak

  • @muhammadrizkiaditya2528
    @muhammadrizkiaditya2528 2 роки тому +1

    29/09/2022
    23:03

  • @caruban82
    @caruban82 Рік тому

    Pak video yang membahas meta apakah ada?

  • @agushamsa
    @agushamsa 2 роки тому

    SALAM DARI TAHUN RAMADHAN 2022

  • @nazarudinlatif233
    @nazarudinlatif233 6 років тому

    mantaap

  • @ininamakokharusdijarak6815
    @ininamakokharusdijarak6815 3 роки тому

    keren

  • @mahirtutorial680
    @mahirtutorial680 4 роки тому +1

    Sayang jika tidak dimanfaat kan ilmu yang diberikan secara gratis inii

  • @faymanurung4187
    @faymanurung4187 7 років тому +4

    Mau tanya mas dhika....
    Kalau dlm box-sizing ada pilihan border-box & content-box. Nah, utk content-box utk fungsi apa ya mas...
    Tx before 😊

    • @sandhikagalihWPU
      @sandhikagalihWPU  7 років тому +8

      menggunakan content-box, ketika kamu menambahkan padding & border, maka ukuran dari kotaknya (width & height) akan berubah juga... beda dengan border box, ukuran kotaknya tidak berubah..

    • @shalataiip4006
      @shalataiip4006 4 роки тому

      @@sandhikagalihWPU kalau dipakai dua2nya bisa ndak Pak Dhika

    • @oktavianusbramantioambarit8981
      @oktavianusbramantioambarit8981 4 роки тому

      @@sandhikagalihWPU berarti content-box sama saja seperti kita tidak menggunakan properti box-sizing ya pak ?

  • @robbisyahputra2950
    @robbisyahputra2950 3 роки тому

    Hadir

  • @sorya8385
    @sorya8385 2 роки тому

    Menit 10:14 kenapa jadi 300x300 pak? Bukannya 200?

  • @boyniverse8044
    @boyniverse8044 4 роки тому +1

    terimakasih mas atas materi2nya.. izin bertanya, kenapa saat saya atur ukuran dari margin di inspect element browsernya nilainya tetap 8px? tampilannya di browsernya sih berubah tapi angka di inspect elemennya tidak.. terimakasih sebelumnya

    • @indra_5629
      @indra_5629 4 роки тому

      Itu biasanya bug

    • @fikristboy
      @fikristboy 3 роки тому

      Itu karena Anda inspect ny bukan di element yg d kasih margin,tapi di eleement body
      Kalo inspect NY dielemet yg d kasih margin,baru berubah

  • @riskya.k.ajawagans3680
    @riskya.k.ajawagans3680 6 років тому +2

    pak gunany

    • @bl4ckkich4n9
      @bl4ckkich4n9 5 років тому

      Yang itu biar di browser tau klo yg di gunain dalam konten tersebut bahasa inggris dan klo meta charset itu buat mudah di cari oleh pencari goggle, biar web kita paling atas klo di cari, mohon maaf jika salah boleh dikoreksi ;)

  • @hermawanyuniarto5238
    @hermawanyuniarto5238 4 роки тому

    15:26

  • @jabalsur9923
    @jabalsur9923 4 роки тому +1

    Mengapa computednya tdk sesuai dgn apa yg sdh saya edit ?

  • @libertuslin6625
    @libertuslin6625 4 роки тому +1

    Pak gimana cara nambahin feature border sizingnya pada sublime text. Soalnya untuk border-sizing tidak keluar di code editor saya. Saya menggunakan code editor sublime text 3.2.2, Build 3211. Terimaksih pak @sandhikagalih

  • @afifsyamfauzi5103
    @afifsyamfauzi5103 4 роки тому +3

    Cape ey ngerangkum terus wkwk

  • @brabromd_artchannel363
    @brabromd_artchannel363 4 роки тому

    Pak Sandika, tag meta charset itu ketik manual apa ada otomatis, karena sublime saya tidak ada tag itu, tks Pak

  • @sriedynurcahyo3894
    @sriedynurcahyo3894 7 років тому +1

    oya kalau bedanya box-sizing:border-box dengan box-sizing:content-box apa mas??

    • @sandhikagalihWPU
      @sandhikagalihWPU  7 років тому +1

      konten box itu areanya lebih kecil sesuai dengan contentnya, kali border box menghitung juga padding dan tebal bordernya..

  • @ginrpl
    @ginrpl 2 роки тому

    Apakah tutornya masih recommended di 2022?

  • @mokhamadabdulrozaq7048
    @mokhamadabdulrozaq7048 4 роки тому

    Izin mas Dhika, untuk peletakan box-sizing yg tepat apakah ditaruh di div (parent) atau di class satu (child) nya?

    • @mahendratatang5710
      @mahendratatang5710 3 роки тому

      Tergantung kebutuhan peletakan kontennya nanti mau dimana

  • @PBacktrack
    @PBacktrack 3 роки тому

    pak dika klo saya buat 2 kolom kiri dan kanan ketika di ganti jd layar smartphone maka kolom kiri akan naik dan kolom kanan akan kebawah
    saya mau buat kolom kanan menjadi di atas gimana ya?

  • @linggihwidiarta4805
    @linggihwidiarta4805 6 років тому

    Kak permisi saya mau nanya, knp saat saya mengurai nilai lebar dan tinggi nya percis seperti bapak agar bisa menyesuaikan ketika di tambahkan padding tp kenapa text nya malah keluar dari box nya kak? Tidak mau ikut mengecil seperti box nya tp tetap dengan ukurannya sendiri pdhal sya suda mengikuti code yg percis seperti kk buat

  • @willychanel3864
    @willychanel3864 7 років тому +3

    pak kenapa di

  • @nmlss_d
    @nmlss_d 3 роки тому

    meta charset itu apa?

  • @muhammadanshari3010
    @muhammadanshari3010 2 роки тому

    pak dosen, saya mau nanya
    box-sizing: border-box; ada masalah, saya sudah mengikuti tutorial anda di video ini tapi hasil box pada browser tidak sama rata, padahal di inspect width nya udah sama 600px
    saya harus bagaimana pak?

  • @roselinaaritonang367
    @roselinaaritonang367 4 роки тому

    Bang buat tabel nyamping gmna

  • @theodora3774
    @theodora3774 3 роки тому

    pak mau tanya itu apa? utk apa? Thanks pak

    • @theodora3774
      @theodora3774 3 роки тому

      sama ini tuh apa pak? buat apa? terimakasih pak

  • @arifdani8145
    @arifdani8145 3 роки тому

    Pak saya mau nanya saya sudah mulai kebingungan perihal box model ini karna saya sangat pemula dalam pembuatan website.. saya sudah menonton dari htm dan css dan ini yg ketiga css layouting. Pertanyaan saya apakah elemen html harus memakai box model, jikalau tidak pakai box model apakah boleh?

  • @herbalobatmatamakmursentos3684

    gw nonton ini di 2023

  • @anzasmr6742
    @anzasmr6742 4 роки тому

    Salam ;

  • @farisanurhani5880
    @farisanurhani5880 2 роки тому

    kalo textnya melebihi width nya gimana cara aturnya? soal e pasti textnya keluar dari box

    • @alwi__
      @alwi__ Рік тому

      ua-cam.com/video/VkUSH3SIH0g/v-deo.html

    • @Bang_All12
      @Bang_All12 4 місяці тому

      Size textnya dikecilin dikit atau boxnya di besarin.

  • @adisetiabudiman4544
    @adisetiabudiman4544 6 років тому

    Pak klo mau bikin konten tulisan di body bagusnya pake tag div / p ?

  • @bellanovyanda4225
    @bellanovyanda4225 5 років тому

    bismillah mau tanya, kalau padding dibikin transparansy bisa gakya ? agar gambar backrgound kelihatan

    • @indra_5629
      @indra_5629 4 роки тому

      Padding emang transparan

  • @agustriwahyudi9113
    @agustriwahyudi9113 2 роки тому

    #ask bang kalo ngubah ukuran panjang kotak text form gimana ya... mohon solusi

  • @eriantoko
    @eriantoko 3 роки тому

    download slide nya gimana kak gak paham aku hehe

  • @naufalfirdaus9875
    @naufalfirdaus9875 5 років тому

    Pak, kok new file saya gak gitu ya?

  • @timurgunok1974
    @timurgunok1974 2 роки тому

    watcNice tutorialng tNice tutorials on a Friday tNice tutorialnking ima be the next Skrillex by monday.

  • @asepnocounter.
    @asepnocounter. 2 роки тому

    Banh div sama nav apakah sama fungsinya???🗿

  • @yopiesoselisa4415
    @yopiesoselisa4415 4 роки тому

    ini fungsinya apa ya kk??

    • @satriyorizkyansah
      @satriyorizkyansah 4 роки тому

      Pada saat membuat satu halaman website dengan memberikan tag berarti halaman tersebut telah memberi informasi terhadap browser dan search engine untukmelakukan pengkodean karakter sesuai ketentuan UTF-8.

    • @indra_5629
      @indra_5629 4 роки тому

      Untung html lang en itu website yabg kita buat menggunakan bahasa english

  • @abusyaekhon4125
    @abusyaekhon4125 3 роки тому

    musiknya om ganggu banget kurang fokus

  • @leon...4734
    @leon...4734 2 роки тому

    10:35