размещение div внутри другого div сохранение пробелов между двумя divs

Я поместил один div внутри другого div (main_content внутри содержимого). Я хочу иметь пробелы между двумя div, я пробовал использовать свойство padding, но main_content заполнял все пробелы содержимого div.размещение div внутри другого div сохранение пробелов между двумя divs

Как я могу сделать div main_content в содержимом div с некоторыми пробелами (вверху, слева, внизу, справа) между двумя divs во всех типах дисплеев?

body {background-color:#eaeaea; color:#303030;} 
 
#container {width:100%;height:100%;} 
 
#tray {padding:20px 15px; font:85%/1.2 "tahoma",sans-serif;} 
 
#tray {background-color:#36648B; color:#cfcfcf;} 
 
#cols {position:relative; margin:15px 0; padding-right:15px;} 
 
#aside {float:left; width:215px; margin-right:0;} 
 
#content { margin-left:232px; overflow:visible;background-color: #ffffff; } 
 
#main_content 
 
{ 
 
    padding-right:10px; 
 
    padding-left:10px; 
 
    padding-top:10px; 
 
    padding-bottom:10px; 
 
    background-color:#8BC735; 
 
}

<body lang="en"> 
 
    <div id="container"> 
 
     <div id="tray"> 
 
     testing 
 
     </div> 
 
      <div id="cols"> 
 
       <div id = "aside"> 
 
       temp 
 
       </div> 
 
       <div id = "content"> 
 
        <div id="main_content"> 
 
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
 
        </div> 
 
       </div>        
 
      </div>  
 
    </div> 
 
</body>

источник

2017-01-04 user4221591

какое пространство необходимо удалить? –

- это то, что вы хотите https://jsfiddle.net/xk6m4ybm/ –

Вы должны установить свойства отступов для #content DIV вместо #main_content дел.

#content { 
    padding: 10px 10px 10px 10px; 
    background-color: red; 
} 

#main_content { 
    background-color: #8BC735; 
}

источник

2017-01-04 10:32:27

Вы можете либо установить дополнение к родительскому объекту. Или установите запас ребенка

#content { 
    padding: 10px; 
}

Или

#main_content { 
    margin: 10px; 
}

источник

2017-01-04 10:36:41 Navaneeth

Рабочий фрагмент кода:

body {background-color:#eaeaea; color:#303030;} 
 
#container {width:100%;height:100%;} 
 
#tray {padding:20px 15px; font:85%/1.2 "tahoma",sans-serif;} 
 
#tray {background-color:#36648B; color:#cfcfcf;} 
 
#cols {position:relative; margin:15px 0; padding-right:15px;} 
 
#aside {float:left; width:215px; margin-right:0;} 
 
#content { 
 
    overflow: hidden; 
 
    background-color: white; 
 
} 
 
#main_content 
 
{ 
 
    padding-right:10px; 
 
    padding-left:10px; 
 
    padding-top:10px; 
 
    padding-bottom:10px; 
 
    background-color:#8BC735; 
 
    margin:10px; 
 
}

<div id="container"> 
 
     <div id="tray"> 
 
     testing 
 
     </div> 
 
      <div id="cols"> 
 
       <div id = "aside"> 
 
       temp 
 
       </div> 
 
       <div id = "content"> 
 
        <div id="main_content"> 
 
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
 
        </div> 
 
       </div>        
 
      </div>  
 
    </div>

источник

2017-01-04 10:43:24 Vikrant

Попробуйте эту надежду, что это помогает.

#aside {float:left; width:45%;background-color: #ffffff; margin:5px;padding:5px;} 
#content {float:left;width:50%; overflow:visible;background-color: #ffffff; } 
#main_content 
{ 
    margin:10px; 
    padding:10px; 
    background-color:#8BC735; 


}

источник

2017-01-04 10:43:29 user247217

размещение div внутри другого div сохранение пробелов между двумя divs

ответ

Смежные вопросы