كيفية إزالة فراغ بين عنصرين في css

محمود سعداوي2 · 9 أغسطس 2022

السلام عليكم

ما سبب وجود الفراغ بالأبيض بين 'two sections' علما و أني وضعت margin-top = 0 للعنصر الأسفل

Capture.JPG.feb3751ecd62984113f8df6c99d31fad.JPG

شكرا.

Wael Aljamal · 9 أغسطس 2022

لايمكن حل المشاكل البرمجية بدون إرفاق الأكواد التي كتبتها و لها دخل في المشكلة

كما أنه من الجيد لو تفتح قسم التنسيقات في أدوات المطور و تضع صور بالأصناف و التنسيقات أو تنسخها للتي تؤثر على الفراغ

محمود سعداوي2 · 9 أغسطس 2022

بتاريخ 1 دقيقة مضت قال Wael Aljamal:

لايمكن خل المشاكل البرمجية بدون إرفاق الأكواد التي كتبتها و لها دخل في المشكلة0

كما أنه من الجيد لو تفتح قسم التنسيقات في أدوات المطور و تضع صور بالأصناف و التنسيقات أو تنسخها للتي تؤثر على الفراغ

يوجد حل في وضع قيمة سالبة ل margin-top و لكن هذا لديه تأثير سالب عند جعل الموقع responsive

Wael Aljamal · 9 أغسطس 2022

بتاريخ 4 دقائق مضت قال محمود سعداوي:

يوجد حل في وضع قيمة سالبة ل margin-top و لكن هذا لديه تأثير سالب عند جعل الموقع responsive

ربما يوجد margin bottom للعنصر في الأعلى اعمله 0

محمود سعداوي2 · 9 أغسطس 2022

بتاريخ 3 دقائق مضت قال محمود سعداوي:

يوجد حل في وضع قيمة سالبة ل margin-top و لكن هذا لديه تأثير سالب عند جعل الموقع responsive

تفضل

كود css

.section-2{
    overflow: hidden;
    background-color: #222020;
}

.parag-wrapper{
    margin: 50px auto;
    max-width: 310px;
    height: auto;
    color: #fff;
    position: relative;
}
.parag-wrapper i{
    font-size: 20px;
}
.parag-wrapper .fa-quote-right{
    position: absolute;
    right: 0;
}
.parag-wrapper p{
    margin: 10px auto;
    font-size: 18px;
    text-align: justify;
    font-family: 'Oswald', sans-serif; 
}
.parag-wrapper p::after{
    content: "";
    position: absolute;
    width: 90%;
    height: 2px;
    background-color: #fff;
    top: 5%;
    right: 0;
}
.parag-wrapper p::before{
    content: "";
    position: absolute;
    width: 90%;
    height: 2px;
    background-color: #fff;
    bottom: -9%;
    left: 0;
}
/* end of section-2 */

/* section 3 ==> Pricing  */
/* #222020 */
.section-3{
    background-color: #03070e;
    margin-top:0;
}
.pricing-cards-wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
}

كود html

<section class="section-2">
        <h1 class="section-heading">About Us</h1>
   <div class="parag-wrapper">
            <i class="fa-solid fa-quote-left"></i>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
               Tempora totam nam quasi officia, voluptatum deleniti provident
               natus temporibus molestiae quae ratione fugit placeat voluptatibus, 
               deserunt repellat dicta, optio quo quisquam libero tempore veritatis? 
               Veritatis nam magnam omnis nobis iusto recusandae minus odit eligendi 
               maxime dolorem, eos id! Fugiat, adipisci perspiciatis!</p>
            <i class="fa-solid fa-quote-right"></i>
            
        </div>
    </section>
    <!-- end of section-2 -->

    <!-- section 3 ==> Pricing -->
    <section class="section-3">
        <h1 class="section-heading">Pricing</h1>
        <div class="pricing-cards-wrapper">
            <div class="pricing-card">
                <div class="pricing-card-front">
                    <h2 class="pricing-card-heading">Free</h2>
                    <h3 class="pricing-card-price">$0</h3>
                    <ul class="pricing-card-list free-list">
                        <li>
                            <i class="fa-solid fa-check"></i>
                            <span>Lorem ipsum dolor</span>
                            <i class="fa-solid fa-check"></i>
                            <span>Lorem ipsum dolor</span>
                            <i class="fa-solid fa-xmark"></i>
                            <span>Lorem ipsum dolor</span>
                            <i class="fa-solid fa-xmark"></i>
                            <span>Lorem ipsum dolor</span>
                            <i class="fa-solid fa-xmark"></i>
                            <span>Lorem ipsum dolor</span>
                        </li>
                    </ul>
                    <button class="pricing-card-btn btn-free" type="button">
                        CHOOSE PLAN
                    </button>
                </div>
                <div class="back-free pricing-card-back">
                    <a href="#">Order Now</a>
                </div>

            </div>

            <div class="pricing-card">
                <div class="pricing-card-front">
                    <h2 class="pricing-card-heading">Basic</h2>
                    <h3 class="pricing-card-price">$299</h3>
                    <ul class="pricing-card-list basic-list">
                        <li>
                            <i class="fa-solid fa-check"></i>
                            <span>Lorem ipsum dolor</span>
                            <i class="fa-solid fa-check"></i>
                            <span>Lorem ipsum dolor</span>
                            <i class="fa-solid fa-check"></i>
                            <span>Lorem ipsum dolor</span>
                            <i class="fa-solid fa-xmark"></i>
                            <span>Lorem ipsum dolor</span>
                            <i class="fa-solid fa-xmark"></i>
                            <span>Lorem ipsum dolor</span>
                        </li>
                    </ul>
                    <button class="pricing-card-btn btn-basic" type="button">
                        CHOOSE PLAN
                    </button>
                </div>
                <div class="back-basic pricing-card-back">
                    <a href="#">Order Now</a>
                </div>

            </div>

            <div class="pricing-card">
                <div class="pricing-card-front">
                    <h2 class="pricing-card-heading">Standard</h2>
                    <h3 class="pricing-card-price">$699</h3>
                    <ul class="pricing-card-list standard-list">
                        <li>
                            <i class="fa-solid fa-check"></i>
                            <span>Lorem ipsum dolor</span>
                            <i class="fa-solid fa-check"></i>
                            <span>Lorem ipsum dolor</span>
                            <i class="fa-solid fa-check"></i>
                            <span>Lorem ipsum dolor</span>
                            <i class="fa-solid fa-check"></i>
                            <span>Lorem ipsum dolor</span>
                            <i class="fa-solid fa-xmark"></i>
                            <span>Lorem ipsum dolor</span>
                        </li>
                    </ul>
                    <button class="pricing-card-btn btn-standard" type="button">
                        CHOOSE PLAN
                    </button>
                </div>
                <div class="back-standard pricing-card-back">
                    <a href="#">Order Now</a>
                </div>

            </div>

            <div class="pricing-card">
                <div class="pricing-card-front">
                    <h2 class="pricing-card-heading">Premium</h2>
                    <h3 class="pricing-card-price">$999</h3>
                    <ul class="pricing-card-list premium-list">
                        <li>
                            <i class="fa-solid fa-check"></i>
                            <span>Lorem ipsum dolor</span>
                            <i class="fa-solid fa-check"></i>
                            <span>Lorem ipsum dolor</span>
                            <i class="fa-solid fa-check"></i>
                            <span>Lorem ipsum dolor</span>
                            <i class="fa-solid fa-check"></i>
                            <span>Lorem ipsum dolor</span>
                            <i class="fa-solid fa-check"></i>
                            <span>Lorem ipsum dolor</span>
                        </li>
                    </ul>
                    <button class="pricing-card-btn btn-premium" type="button">
                        CHOOSE PLAN
                    </button>
                </div>
                <div class="back-premium pricing-card-back">
                    <a href="#">Order Now</a>
                </div>

            </div>
        </div>
    </section>
    <!-- end of section 3 -->

Wael Aljamal · 9 أغسطس 2022

بتاريخ 6 دقائق مضت قال محمود سعداوي:

تفضل

شكرا لك

يمكنك تحديد التنسيق التالي لجميع العناصر

        * {
            margin: 0;
            padding: 0;
        }

لتتخلص من مشاكل الهوامش الافتراضية من المتصفح

محمود سعداوي2 · 9 أغسطس 2022

*, ::after, ::before{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    list-style: none;
}

بتاريخ 4 دقائق مضت قال Wael Aljamal:
شكرا لك

يمكنك تحديد التنسيق التالي لجميع العناصر
        * {
            margin: 0;
            padding: 0;
        }
لتتخلص من مشاكل الهوامش الافتراضية من المتصفح

نعم بالتأكيد.

قبل بداية تنسيق العناصر دائما أكتب الكود النالي

بتاريخ الآن قال محمود سعداوي:
*, ::after, ::before{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    list-style: none;
}
نعم بالتأكيد.

قبل بداية تنسيق العناصر دائما أكتب الكود النالي

*, ::after, ::before{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    list-style: none;
}

Wael Aljamal · 9 أغسطس 2022

بتاريخ الآن قال محمود سعداوي:

قبل بداية تنسيق العناصر دائما أكتب الكود النالي

حسب ما أرفقت من شيفرات، وضعتهم في ملف و فتحتهم في المتصفح وظهر الفارق الأبيض بينهما، وعند إلغاء الهوامش احتفت المشكلة.

بتاريخ 27 دقائق مضت قال Wael Aljamal:

كما أنه من الجيد لو تفتح قسم التنسيقات في أدوات المطور و تضع صور بالأصناف و التنسيقات أو تنسخها للتي تؤثر على الفراغ

كيفية إزالة فراغ بين عنصرين في css

السؤال

محمود سعداوي2

7 أجوبة على هذا السؤال

Recommended Posts

Wael Aljamal

محمود سعداوي2

Wael Aljamal

محمود سعداوي2

Wael Aljamal

محمود سعداوي2

Wael Aljamal

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية