CSS box вокруг техники box - PullRequest
Новая
       5

CSS box вокруг техники box

1 голос
/ 29 апреля 2010

Я пытался создать блок разделения CSS с содержимым в нем и рамкой вокруг него.

Вместо того, чтобы использовать технику рамки-рамки, я вместо этого пробовал новую технику рамки для рамки.. 

<html>
<head>
  <style type="text/css">
    #outer{
    height: 20px; 
    width: 20px; 
background-color:#233D78; 


     }
     #inner{

height:18px; 
width: 18px; 
     background-color: #FFF; 

     font-size: 1em; 
     text-align:center;
     font-family:'Bookman Old Style', serif;
     padding: 0px; 
     margin-top: 1px; 
     margin-right:auto; 
     margin-left:auto;
     margin-bottom:1px; 
     vertical-align:middle;

      }
  </style>
</head>
<body>
<div id="outer"><div id="inner">TEXT</div></div>
</body>
</html>

Почему-то границы с FireFox просто не отображаются.

Я попробовал все.Настройка отступов обоих полей, полей и возни с шириной.

Если честно, мне понадобилось около 30 минут, чтобы сделать это, и я до сих пор не могу понять это правильно: (

Я знаю, что для достижения того же результата было бы настроитьграницы вокруг только одной рамки. Но я просто хочу изучить эту рамку вокруг техники цвета фона коробки.

Спасибо заранее

Ответы [ 3 ]

3 голосов
/ 29 апреля 2010

То, что, по-видимому, работает наиболее последовательно, это использовать отступы вместо отступа. 

#outer { 
   width:18px;
   height:18px;
   padding:1px;
   background-color:#233D78;
}
#inner {
   width:18px;
   height:18px;
   background-color:#fff;
}
1 голос
/ 29 апреля 2010

Вы должны знать, как работает макет! Использование поля на внутреннем будет работать или заполнение на внешнем будет работать. Помните, что при применении полей, границ или отступов к элементу они располагаются в таком порядке. (Поле оборачивает границу, которая обертывает отступ, который оборачивает элемент.)

Ниже с помощью внутреннего поля создайте прямоугольник вокруг рамки. 

<html> 
<head> 
  <style type="text/css"> 
    #outer{ 
    height: 20px;  
    width: 20px;  
background-color:#233D78;  


     } 
     #inner{ 


     background-color: #FFF;  

    margin: 2px; 
      } 
  </style> 
</head> 
<body> 
<div id="outer"><div id="inner">TEXT</div></div> 
</body> 
</html>
0 голосов
/ 29 апреля 2010

Применение border: 2px solid #fff; к #outer прекрасно решает проблему. Тогда вы можете просто избавиться от #inner, так как это избыточно.

НО, если вы настаиваете на использовании двух DIV, вам нужно удалить операторы height & width и применить margin: 2px; к #inner. Это позволит увидеть 2 пикселя #outer background-color.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...