ابوالفضل تابع بردبار
3 سال پیش
توسط ابوالفضل تابع بردبار
مطرح شد
مشکل یا شیوه اشتباه کد زنی در css
سلام و دورد فراوان خدمت دوستان عزیز
دوستان من جدیدا به یک مشکل داخل css برخورد کردم نمیدونم باگ خود css هست یا من اشتباه کد میزنم
مشکل این هست
وقتی که من یک div یا یک section تعریف میکنم و داخلش یک h۱ قرار میدم وقتی یک background به div داده میشه و به h۱ یک
margin-top میدم خود div از بالا فاصله میگیره نمونش کد زیر:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-۸">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=۱.۰">
<title>Abolfazl-Tabe-Bordbar</title>
<style>
body{
margin: ۰;
padding: ۰;
box-sizing: border-box;
}
.a{
width: ۱۰۰%;
height: ۱۰vh;
background-color: #DFDBE۵;
background-image: url("data:image/svg+xml,%۳Csvg xmlns='http://www.w۳.org/۲۰۰۰/svg' width='۸۰' height='۸۰' viewBox='۰ ۰ ۸۰ ۸۰'%۳E%۳Cg fill='%۲۳۹C۹۲AC' fill-opacity='۰.۴'%۳E%۳Cpath fill-rule='evenodd' d='M۰ ۰h۴۰v۴۰H۰V۰zm۴۰ ۴۰h۴۰v۴۰H۴۰V۴۰zm۰-۴۰h۲l-۲ ۲V۰zm۰ ۴l۴-۴h۲l-۶ ۶V۴zm۰ ۴l۸-۸h۲L۴۰ ۱۰V۸zm۰ ۴L۵۲ ۰h۲L۴۰ ۱۴v-۲zm۰ ۴L۵۶ ۰h۲L۴۰ ۱۸v-۲zm۰ ۴L۶۰ ۰h۲L۴۰ ۲۲v-۲zm۰ ۴L۶۴ ۰h۲L۴۰ ۲۶v-۲zm۰ ۴L۶۸ ۰h۲L۴۰ ۳۰v-۲zm۰ ۴L۷۲ ۰h۲L۴۰ ۳۴v-۲zm۰ ۴L۷۶ ۰h۲L۴۰ ۳۸v-۲zm۰ ۴L۸۰ ۰v۲L۴۲ ۴۰h-۲zm۴ ۰L۸۰ ۴v۲L۴۶ ۴۰h-۲zm۴ ۰L۸۰ ۸v۲L۵۰ ۴۰h-۲zm۴ ۰l۲۸-۲۸v۲L۵۴ ۴۰h-۲zm۴ ۰l۲۴-۲۴v۲L۵۸ ۴۰h-۲zm۴ ۰l۲۰-۲۰v۲L۶۲ ۴۰h-۲zm۴ ۰l۱۶-۱۶v۲L۶۶ ۴۰h-۲zm۴ ۰l۱۲-۱۲v۲L۷۰ ۴۰h-۲zm۴ ۰l۸-۸v۲l-۶ ۶h-۲zm۴ ۰l۴-۴v۲l-۲ ۲h-۲z'/%۳E%۳C/g%۳E%۳C/svg%۳E");
}
h۱{
text-align: center;
margin-top: ۱۰۰px;
}
</style>
</head>
<body>
<section></section>
<div class="a">
<h۱>Abolfazl-Tabe-Bordbar</h۱>
</div>
</body>
</html>ممنون میشم که راهنمایی کنید بنده رو
باتشکر
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
ثبت پرسش جدید
گزارش تخلف
کپی کردن
1
سلام بخاطر اینکه هیچ تگی بالای h1 وجود نداره و از چه چیزی فاصله بگیرد؟ اگر میخواهید داخل المنت فضای خالی بدهید باید padding-top بدهید در غیر این صورت یک فرزند دیگر باید در داخل div باشد تا از آن فاصله بگیرد
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Abolfazl-Tabe-Bordbar</title>
<style>
body{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.a{
width: 100%;
height: 10vh;
background-color: #DFDBE5;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%239C92AC' fill-opacity='0.4'%3E%3Cpath fill-rule='evenodd' d='M0 0h40v40H0V0zm40 40h40v40H40V40zm0-40h2l-2 2V0zm0 4l4-4h2l-6 6V4zm0 4l8-8h2L40 10V8zm0 4L52 0h2L40 14v-2zm0 4L56 0h2L40 18v-2zm0 4L60 0h2L40 22v-2zm0 4L64 0h2L40 26v-2zm0 4L68 0h2L40 30v-2zm0 4L72 0h2L40 34v-2zm0 4L76 0h2L40 38v-2zm0 4L80 0v2L42 40h-2zm4 0L80 4v2L46 40h-2zm4 0L80 8v2L50 40h-2zm4 0l28-28v2L54 40h-2zm4 0l24-24v2L58 40h-2zm4 0l20-20v2L62 40h-2zm4 0l16-16v2L66 40h-2zm4 0l12-12v2L70 40h-2zm4 0l8-8v2l-6 6h-2zm4 0l4-4v2l-2 2h-2z'/%3E%3C/g%3E%3C/svg%3E");
}
h1{
text-align: center;
margin-top: 100px;
}
</style>
</head>
<body>
<section></section>
<div class="a">
<p>sina</p>
<h1>Abolfazl-Tabe-Bordbar</h1>
</div>
</body>
</html>
گزارش تخلف
کپی کردن
1
گزارش تخلف
کپی کردن
1
سلام بخاطر اینکه هیچ تگی بالای h1 وجود نداره و از چه چیزی فاصله بگیرد؟ اگر میخواهید داخل المنت فضای خالی بدهید باید padding-top بدهید در غیر این صورت یک فرزند دیگر باید در داخل div باشد تا از آن فاصله بگیرد
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Abolfazl-Tabe-Bordbar</title>
<style>
body{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.a{
width: 100%;
height: 10vh;
background-color: #DFDBE5;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%239C92AC' fill-opacity='0.4'%3E%3Cpath fill-rule='evenodd' d='M0 0h40v40H0V0zm40 40h40v40H40V40zm0-40h2l-2 2V0zm0 4l4-4h2l-6 6V4zm0 4l8-8h2L40 10V8zm0 4L52 0h2L40 14v-2zm0 4L56 0h2L40 18v-2zm0 4L60 0h2L40 22v-2zm0 4L64 0h2L40 26v-2zm0 4L68 0h2L40 30v-2zm0 4L72 0h2L40 34v-2zm0 4L76 0h2L40 38v-2zm0 4L80 0v2L42 40h-2zm4 0L80 4v2L46 40h-2zm4 0L80 8v2L50 40h-2zm4 0l28-28v2L54 40h-2zm4 0l24-24v2L58 40h-2zm4 0l20-20v2L62 40h-2zm4 0l16-16v2L66 40h-2zm4 0l12-12v2L70 40h-2zm4 0l8-8v2l-6 6h-2zm4 0l4-4v2l-2 2h-2z'/%3E%3C/g%3E%3C/svg%3E");
}
h1{
text-align: center;
margin-top: 100px;
}
</style>
</head>
<body>
<section></section>
<div class="a">
<p>sina</p>
<h1>Abolfazl-Tabe-Bordbar</h1>
</div>
</body>
</html>