Пространство HTML/CSS между двумя разделами

Я просмотрел веб-сайт для ответа на мой вопрос, но большая часть ответов на мои запросы задавала противоположность моему вопросу, который, похоже, является более общей проблемой. Я хочу разделить два div с 20-пиксельным пространством, чтобы divs отображались как 2 прямоугольника, а не один.Пространство HTML/CSS между двумя разделами

Вот мой CSS:

#balances { 
font-family:Lato; 
background-color:#00253F; 
color:#FFFFFF; 
font-size:28px; 
padding-left:15px; 
font-weight:bold; 
padding-right:10px; 
padding-top:15px; 
height:130px; 
width:52%; 
float:left; 
} 

#transact { 
font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace; 
background-color:#00253F; 
color:#FFFFFF; 
font-size:28px; 
padding-left:15px; 
font-weight:bold; 
padding-right:10px; 
padding-top:15px; 
height:130px; 
width:52%; 
float:left; 
}

это HTML:

<body> 
    <div id="main-page-content"> 

      <div id="balances"> 
       <u>Balances</u> 
       <div class="total-balance">Total Balance</div> 


       <div class="balance">Balance: 
        <a href="#" class="button"/>Deposit</a> 
        <a href="#" class="button"/>Withdraw</a> 
       </div> 

       <div class="fbalance"> 
        <a href="#" class="button"/>Deposit</a> 
        <a href="#" class="button"/>Withdraw</a> 
       </div> 

      </div> 

      <div id="transact"> 

      </div> 

    </div> 
</body>

Результат выше: Result of the code I've given

источник

2015-05-06 Corona

Использовать 'margin' ... – Ruddy

Какие элементы' div' вы хотите разделить? –

просто видя код, кажется, вам нужно дать пробел между '' тегом. поэтому дайте margin для тега 'a'. вы можете попробовать, как этот '.balance> a: last-child { margin: 0 0 0 15px; красный цвет; } 'check Demo. http://jsbin.com/vuhulopimo/1/edit?html,css,output –

Довольно просто с помощью margin, есть много способов но я пошел с простым способом поставить класс на кнопку 2 и установить margin-left: 20px;.

Если вы не хотите добавлять класс, вы можете использовать :nth-child(n) (или другие селекторы, найти еще here), обратите внимание, что это использование CSS3. Подробнее об этом here.

.button { 
 
    width: 100px; 
 
    height: 20px; 
 
    background: blue; 
 
    float: left; 
 
    color: #fff; 
 
} 
 
.button2 { 
 
    margin-left: 20px; 
 
}

<div class="button">Button 1</div> 
 
<div class="button button2">Button 2</div>

Используя код, указанный Вами при помощи nth-child(n), вы можете сделать это, как это.

.balance a:nth-child(2) { 
 
    margin-left: 20px; 
 
} 
 
.fbalance a:nth-child(2) { 
 
    margin-left: 20px; 
 
} 
 
#balances { 
 
    font-family:Lato; 
 
    background-color:#00253F; 
 
    color:#FFFFFF; 
 
    font-size:28px; 
 
    padding-left:15px; 
 
    font-weight:bold; 
 
    padding-right:10px; 
 
    padding-top:15px; 
 
    height:130px; 
 
    width:100%; 
 
    float:left; 
 
} 
 
#transact { 
 
    font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace; 
 
    background-color:#00253F; 
 
    color:#FFFFFF; 
 
    font-size:28px; 
 
    padding-left:15px; 
 
    font-weight:bold; 
 
    padding-right:10px; 
 
    padding-top:15px; 
 
    height:130px; 
 
    width:52%; 
 
    float:left; 
 
}

<div id="balances"> <u>Balances</u> 
 
    <div class="total-balance">Total Balance</div> 
 
    <div class="balance">Balance: 
 
     <a href="#" class="button">Deposit</a> 
 
     <a href="#" class="button">Withdraw</a> 
 
    </div> 
 
    
 
    <div class="fbalance"> 
 
     <a href="#" class="button">Deposit</a> 
 
     <a href="#" class="button">Withdraw</a> 
 
    </div> 
 
</div>

источник

2015-05-06 08:29:48 Ruddy

Почему вы используете 'nth-chiild'? мы можем просто использовать 'last-child' в этом случае. –

@ KheemaPandey пытался сохранить это просто, OP не знал, как использовать «margin», почему я буду путать их больше со всеми видами разных селекторов. Это единственный пример. – Ruddy

Ваш первый пример намного проще. Мне нравится этот.. –

Добавить маржу дивы, в котором вы хотите пространство просто.

источник

2015-05-06 08:31:08

Пространство HTML/CSS между двумя разделами

ответ

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