PDA

View Full Version : سوال: اگه بخوایم خطی بودن خاصیت تگ p رو در این تکه کد حذف کنم، از چه روشی بهتره؟؟



sahel65
سه شنبه 05 خرداد 1394, 07:44 صبح
سلام به همه:
دوستای خوبم این کد رو ببینین:
*{
margin:0;
padding:0;
}
body{

}
p{
color:red;
}
span{
color:blue;
}
طبق خصیصه ای که تگ p داره میاد و کل خط رو اشغال میکنه اگه Inspect بکنیم، میبینم که کل خط اشغال شده.
حالا با کدوم سلکتور من بیام و این خاصیت رو ازش بگیرم که دقیقا بشه مثل span و نیاد کل خط رو بگیره و بیاد فقط محدوده ای رو که در اون قرار گرفته رو اشغال کنه.

display:inline-block
یا اینکه بهش float هم بدم؟؟ چون راستش رو بخواین اینها رو امتحان کردم و نتیجه ای که میخواستم رو بدست نیاوردم. البته هنوز تو تگ div نذاشتمشون ها، فقط از همین المانها تو صفحه html استفاده کردم.
اینهم کد html :


<body>
<p>hello worldhello worldhello worldhello worldhello world</p>
<span>hello worldhello worldhello worldhello worldhello world</span>
<p>hello worldhello worldhello worldhello worldhello world</p>
<span>hello worldhello worldhello world</span>
</body>

و کل این کدها جهت تست (https://jsfiddle.net/n2c62gc9/).

iker-casillas
سه شنبه 05 خرداد 1394, 10:31 صبح
سلام
تگ span دارای display:inline هست. display: inline-block به این صورت هست که تگ ویژگی تگ های block-level رو داره اما مثل تگ های inline نشون داده میشه.

sahel65
سه شنبه 05 خرداد 1394, 11:05 صبح
خب الان با این توضیح ما اگه بخوایم تگ p رفتاری مشابه با span داشته باشه، و کل خط رو اشغال نکنه، باید چیکار کنیم؟؟

iker-casillas
سه شنبه 05 خرداد 1394, 12:04 عصر
باید به P ویژگی display: inline رو بدید.

sahel65
سه شنبه 05 خرداد 1394, 18:38 عصر
و اگه بخوام همه شون همچنان در خطوط جداگانه باشن، باید حتما یه width هم بدم بهشون دیگه مگه نه؟؟؟
مثل همین الان باشه ظاهر خروجیشون ولی هر کدام در خطوط جداگانه و خاصیت block بودن p رو هم ازش گرفته باشیم.