Çözüldü HTML'de yapıya nasıl kenarlık eklenir?

kaansevinc · 15 Ağustos 2024

[CODE lang="html" title="Kod"]<section class="wrapper bg-light py-6 py-md-8">

<div class="container">

<div class="row ">

<div class="row align-items-center mb-10">

<div class="col-md-8 col-lg-9 col-xl-8 col-xxl-7 pe-xl-20">

<h2 class="display-4 mb-3">Bizimle iletişime geç</h2>

<p class="lead fs-20 mb-0">Uzman kadromuzla sizlere kaliteli hizmet sunmak istiyoruz.</p>

</div>

<div class="col-md-4 col-lg-3 ms-md-auto text-md-end mt-5 mt-md-0">

<a href="tel:{{@$footer['social']['phone']}}" class="btn btn-outline-primary rounded-pill mb-0">İletişime Geç</a>

</div>

</div>

</div>

</div>

</section>[/CODE]

Bu kodun tamamını kapsayacak şekilde bir kenarlık border yapmaya çalışıyorum fakat nasıl yapılacağını bilmiyorum yardımcı olur musunuz?

arminda · 15 Ağustos 2024

kaansevinc dedi:
[CODE lang="html" title="Kod"]<section class="wrapper bg-light py-6 py-md-8">

<div class="container">

<div class="row ">

<div class="row align-items-center mb-10">

<div class="col-md-8 col-lg-9 col-xl-8 col-xxl-7 pe-xl-20">

<h2 class="display-4 mb-3">Bizimle iletişime geç</h2>

<p class="lead fs-20 mb-0">Uzman kadromuzla sizlere kaliteli hizmet sunmak istiyoruz.</p>

</div>

<div class="col-md-4 col-lg-3 ms-md-auto text-md-end mt-5 mt-md-0">

<a href="tel:{{@$footer['social']['phone']}}" class="btn btn-outline-primary rounded-pill mb-0">İletişime Geç</a>

</div>

</div>

</div>

</div>

</section>[/CODE]

Bu kodun tamamını kapsayacak şekilde bir kenarlık border yapmaya çalışıyorum fakat nasıl yapılacağını bilmiyorum yardımcı olur musunuz?

Tabii ki, CSS ile bu <section> elementine kenarlık ekleyebilirsiniz.

CSS:

.wrapper {
    border: 2px solid #000; /* Burada #000 yerine istediğiniz renk kodunu kullanabilirsiniz */
    border-radius: 10px; /* İsteğe bağlı olarak köşeleri yuvarlatabilirsiniz */
    padding: 15px; /* İçerik ile kenarlık arasına boşluk eklemek için padding */
}

Bu kodda:

border: 2px solid #000; kısmı, 2 piksel genişliğinde, düz bir siyah kenarlık ekler. Renk kodunu istediğiniz renkle değiştirebilirsiniz.
border-radius: 10px; kısmı, kenarları yuvarlatır. Eğer keskin köşeler isterseniz, bu satırı kaldırabilirsiniz.
padding: 15px; kısmı, içerikle kenarlık arasına boşluk ekler, böylece içerik kenarlığa çok yakın görünmez.

Eğer CSS kodunu doğrudan HTML belgesinin içinde ekleyecekseniz, <head> kısmına şu şekilde ekleyebilirsiniz:

HTML:

<head>
    <style>
        .wrapper {
            border: 2px solid #000; /* Burada #000 yerine istediğiniz renk kodunu kullanabilirsiniz */
            border-radius: 10px; /* İsteğe bağlı olarak köşeleri yuvarlatabilirsiniz */
            padding: 15px; /* İçerik ile kenarlık arasına boşluk eklemek için padding */
        }
    </style>
</head>

arminda · 15 Ağustos 2024

kaansevinc dedi:
[CODE lang="html" title="Kod"]<section class="wrapper bg-light py-6 py-md-8">

<div class="container">

<div class="row ">

<div class="row align-items-center mb-10">

<div class="col-md-8 col-lg-9 col-xl-8 col-xxl-7 pe-xl-20">

<h2 class="display-4 mb-3">Bizimle iletişime geç</h2>

<p class="lead fs-20 mb-0">Uzman kadromuzla sizlere kaliteli hizmet sunmak istiyoruz.</p>

</div>

<div class="col-md-4 col-lg-3 ms-md-auto text-md-end mt-5 mt-md-0">

<a href="tel:{{@$footer['social']['phone']}}" class="btn btn-outline-primary rounded-pill mb-0">İletişime Geç</a>

</div>

</div>

</div>

</div>

</section>[/CODE]

Bu kodun tamamını kapsayacak şekilde bir kenarlık border yapmaya çalışıyorum fakat nasıl yapılacağını bilmiyorum yardımcı olur musunuz?

Tabii ki, CSS ile bu <section> elementine kenarlık ekleyebilirsiniz.

CSS:

.wrapper {
    border: 2px solid #000; /* Burada #000 yerine istediğiniz renk kodunu kullanabilirsiniz */
    border-radius: 10px; /* İsteğe bağlı olarak köşeleri yuvarlatabilirsiniz */
    padding: 15px; /* İçerik ile kenarlık arasına boşluk eklemek için padding */
}

Bu kodda:

border: 2px solid #000; kısmı, 2 piksel genişliğinde, düz bir siyah kenarlık ekler. Renk kodunu istediğiniz renkle değiştirebilirsiniz.
border-radius: 10px; kısmı, kenarları yuvarlatır. Eğer keskin köşeler isterseniz, bu satırı kaldırabilirsiniz.
padding: 15px; kısmı, içerikle kenarlık arasına boşluk ekler, böylece içerik kenarlığa çok yakın görünmez.

Eğer CSS kodunu doğrudan HTML belgesinin içinde ekleyecekseniz, <head> kısmına şu şekilde ekleyebilirsiniz:

HTML:

<head>
    <style>
        .wrapper {
            border: 2px solid #000; /* Burada #000 yerine istediğiniz renk kodunu kullanabilirsiniz */
            border-radius: 10px; /* İsteğe bağlı olarak köşeleri yuvarlatabilirsiniz */
            padding: 15px; /* İçerik ile kenarlık arasına boşluk eklemek için padding */
        }
    </style>
</head>

Çözüldü HTML'de yapıya nasıl kenarlık eklenir?

Detaylar

kaansevinc

Uzman

arminda

arminda

Yetkin

Benzer konular

Çözüldü HTML'de yapıya nasıl kenarlık eklenir?

kaansevinc

Uzman

arminda

Yetkin

Benzer konular

Privacy & Transparency

Privacy & Transparency