Отступы между div блоками

@web-valeev · Регистрация: 14.03.2013

Author24 — интернет-сервис помощи студентам

Здравствуйте. Делаю простой сайт.
Запутался с отступами между блоками.
Указываю необходимую ширину блоков и отступов, но мои блоки уходят постоянно вниз или имеют разные отступы.
Не лезут по ширине.
Нужны отступы буквально 3px.
Подскажите пожалуйста как поставить отступы между блоками 1,2,3,4,5?

HTML5

<!DOCTYPE html> 
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<link rel="stylesheet" href="basic.css" type="text/css" />
<title>новый сайт</title>
</head>
<body>
 
    <div id="wrapper">
        
        <div id="header"><center>Шапка</center></div>
 
        <div id="center_wrap">
        <div id="one_column">1</div>
        <div id="two_column">
        <div id="content">
        <div id="one_cont">2</div>
            <div id="two_cont">3</div>
            
            <div id="three_cont">4</div>
            
            </div>
            <div id="best">6</div>
            </div>
        <div id="three_column">5</div>  
            
    
        </div>
        
        <div id="footer"></div>
        <div id="footer2"></div>
        
    </div>
    
</body>
</html>

CSS

#wrapper{
font-family: Palatino Linotype;
height: 100vh;
margin-left:5%;
margin-right:5%;
 
}
 
#header{
height: 5vh;
background: #E0E0E0;
margin-bottom: 3px;
border-radius: 20px;
}
 
#center_wrap{
height: 70vh;
width: 100%;
position: absolut;
margin-bottom: 3px;
}
 
#one_column{
height: inherit;
background: red;
float:left;
width:20%;
border-radius: 20px;
}
 
#two_column{
height: inherit;
width: 60%;
float:left;
}
 
#content{
height: 80%;
margin-bottom: 3px;
}
 
#one_cont{
background: #E0E0E0;
border-radius: 20px;
float: left;
height: 100%;
width: 33%;
}
 
#two_cont{
background: green;
border-radius: 20px;
width: 34%;
height: 100%;
float: left;
}
 
#three_cont{
width: 33%;
background: #E0E0E0;
border-radius: 20px;
float: right;
height: 100%;
}
#best{
height: 19%;
border-radius: 20px;
background: #E0E0E0;
}
 
#three_column{
height: inherit;
background: blue;
float:right;
width:20%;
border-radius: 20px;
}
 
#footer{
height: 20vh;
background: green;
border-radius: 20px;
margin-bottom: 3px;
}
 
#footer2{
height: 5vh;
background: yellow;
border-radius: 20px;
}

@web-valeev · 15.12.2014, 21:10 **[ТС]**

Отступы требуются в выделенные места по 3 px.

@Khrist · 16.12.2014, 21:47

вот так попробуйте:

CSS

#wrapper{
font-family: Palatino Linotype;
height: 100vh;
margin-left:5%;
margin-right:5%;
 
}
 
#header{
height: 5vh;
background: #E0E0E0;
margin-bottom: 3px;
border-radius: 20px;
}
 
#center_wrap{
height: 70vh;
width: 100%;
position: absolut;
margin-bottom: 3px;
}
 
#one_column{
height: inherit;
background: red;
float:left;
width:19%;
border-radius:20px;
}
 
#two_column{
height: inherit;
width: 60%;
float:left;
padding-left:3px;
padding-right:3px;
}
 
#content{
height: 80%;
margin-bottom: 3px;
}
 
#one_cont{
background: #E0E0E0;
border-radius: 20px;
float: left;
height: 100%;
width: 33%;
}
 
#two_cont{
background: green;
border-radius: 20px;
width: 34%;
height: 100%;
float: left;
}
 
#three_cont{
width: 33%;
background: #E0E0E0;
border-radius: 20px;
float: left;
height: 100%;
}
#best{
height: 19%;
border-radius: 20px;
background: #E0E0E0;
}
 
#three_column{

HTML5

<!DOCTYPE html> 
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<link rel="stylesheet" href="style.css" type="text/css" />
<title>новый сайт</title>
</head>
<body>
 
    <div id="wrapper">
        
        <div id="header"><center>Шапка</center></div>
 
        <div id="center_wrap">
         <div id="one_column">1</div>
         <div id="two_column">
          <div id="content">
              <div id="one_cont">2</div>
              <div id="two_cont">3</div>
              <div id="three_cont">4</div>
 
            
          </div>
              <div id="best">6</div>
         </div>
         <div id="three_column">5</div>  
            
    
         </div>
        
        <div id="footer"></div>
        <div id="footer2"></div>
        
    </div>
    
</body>
</html>

@web-valeev 1 / 1 / 1 Регистрация: 14.03.2013 Сообщений: 61
	15.12.2014, 21:10 [ТС]	2
	Отступы требуются в выделенные места по 3 px. 0

	16.12.2014, 21:47

Опции темы