فاصله نگرفتن متن از کنار

[tazeh 625]

مشکلی در css بوجود اومده

من وقتی به نوشته داخل بلوکم از راست یا چپ عدد می دم مثلا 5px بجای اینکه نوشته 5 تا فاصله بگیره بلوک بزرگتر می شه.

در .post و .title

کد css

.post{
height: 100px;
width:350px;

border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
background-color:#c5c5c5;

#content {
    background-color:#FFF;
    width:600px;
    height:200px;
    margin:auto;
    margin-top:10px;
    border:solid 1px #ccc;
    -moz-border-radius: 15px;
}

.cant-ent {
text-align:right;
padding:5px 5px 5px 5px;
font-family:tahoma;
font-size:11px;
width:350px;
    height:180px;
    background-color:#FFF;
    float:right;
    border:solid 1px #ccc;
    -moz-border-radius: 10px;
border-radius: 10px;
margin-top:4px;
margin-right:3px;




}
.title{
height: 25px;
width:350px;

border-top-right-radius: 10px;
border-top-left-radius: 10px;
-o-border-top-right-radius: 10px;
-o-border-top-left-radius: 10px;
-moz-border-top-right-radius: 10px;
-moz-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
background-color:#c5c5c5;
border-bottom:1px solid #000000;
}


.post{
height: 100px;
width:350px;

border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
background-color:#c5c5c5;


}

کد

html
<div id="content">
<div class="cant-ent">
<div class="title">
عنوان
</div>
<div class="post">

متن مطلب
</div>

</div>

[majid.azizzadeh 81]

واسه فاصله دادن باید از کد زیر استفاده کنید :

margin-right: 5px;
padding-right: 5px;

margin-right یعنی 5 پیکسل از راست فاصله بده

[ExOZaX 289]

من این فاصله هارو توی وبلاگ جوونیام به زبان ساده گذاشتم یه دید بزن .

http://3x0.blogfa.com/cat-2.aspx

[majid.azizzadeh 81]

آره خیلی خوب توضیح دادی تو وبلاگت ... باید منتظر باشیم ببینیم کاربر ( تازه ) چه می کنن با کدی که دادیدم

[Masoud 296]

سلام

کد سی‌اس‌اسی که قرار دادید ، مشکلاتی داره .

البته منظورم از نظر ساختاری هست. دو بار از کلاس post استفاده کردید که در کلاس اول }ی که باز کردید ، رو نبستید.

--

البته ، برای اینکه درک بهتری از padding و margin و تفاوت‌شون پیدا کنید ، پیشنهاد می‌کنم از آموزشی که لینکش رو در پایین قرار دادم ، استفاده کنید.

http://www.webtarget.ir/blog/margin-padding-border/

موفق باشید

[tazeh 625]

کدها رو اشتباه گذاشتم  اون post اولی اضافه هست

ببخشید 

#content-m{
width:175px;
    height:25x;
    background-color:#c5c5c5;
    float:left;
    border:solid 1px #ccc;
    -moz-border-radius: 10px;
border-radius: 10px;
matgin:3px 3px 3px 3px;
overflow:hiden;
}
.title{
height: 25px;
width:350px;

border-top-right-radius: 10px;
border-top-left-radius: 10px;
-o-border-top-right-radius: 10px;
-o-border-top-left-radius: 10px;
-moz-border-top-right-radius: 10px;
-moz-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
background-color:#c5c5c5;
border-bottom:1px solid #000000;
}

.post{
height: 100px;
width:350px;

border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
background-color:#c5c5c5;


}

.cant-ent {
text-align:right;
padding:5px 5px 5px 5px;
font-family:tahoma;
font-size:11px;
width:350px;
    height:180px;
    background-color:#FFF;
    float:right;
    border:solid 1px #ccc;
    -moz-border-radius: 10px;
border-radius: 10px;
margin-top:4px;
margin-right:3px;




}