kapsayıcı div içine yatayda ortalanmış ve üstten boşluğu olan div yerleştirme problemi

Kodla Büyü
F

freemce

Site Gezgini
Mesajlar
35
arkadaşlar problemim şu şekilde;


<!DOCTYPE html>
<html>
<head>
<style>
.container
{
margin:auto;
width:1000px;
height:500px;
background-color:#bbb;
border:1px solid green;
}
.tpp
{
width:980px;
height:150px;
margin:20px auto;
border:1px solid red;
}
</style>

</head>
<body>
<div class="container">
<div class="tpp"></div>
</div>
</body>
</html>
bunun çıktısı bu şekilde
upload_2020-12-11_0-1-10.png


<!DOCTYPE html>
<html>
<head>
<style>
.container
{
margin:auto;
width:1000px;
height:500px;
background-color:#bbb;

}
.tpp
{
width:980px;
height:150px;
margin:20px auto;
border:1px solid red;
}
</style>

</head>
<body>
<div class="container">
<div class="tpp"></div>
</div>
</body>
</html>

bunun çıktısı ise bu şekilde
upload_2020-12-11_0-7-28.png

border silinince
üstteki boşluk kayboluyor.
Sizce sebebi nedir? Yardımcı olur musunuz?
 
<style>
.container
{
margin:auto;
width:1000px;
height:500px;
background-color:#bbb;
display: table;
}
.tpp
{
width:980px;
height:150px;
margin:20px auto;
border:1px solid red;
display: block;
}
</style>

---------------------------------------------------------------------------------------------------------

.container
{
margin:auto;
width:1000px;
height:500px;
background-color:#bbb;
padding: 10px;
}
.tpp
{
width:980px;
height:150px;
margin:20px auto;
border:1px solid red;
}
</style>

Bu iki yöntemle çözebilirsiniz. Daha detaylı bilgiyi burdan alabilirsiniz.
https://stackoverflow.com/questions/9519841/why-does-this-css-margin-top-style-not-work
 
teşekkürler hocam işe yaradı. Ama bir sorum daha olacak display:table mantığı nedir anlamadım.
 
Cevap yazmak için giriş yap yada kayıt ol.
Geri
Üst