Ширина Fieldset выпуска

У меня есть этот HTML:Ширина Fieldset выпуска

<body> 
<table align="center" width="50%"> 
     <tr> 
      <td> 
       <div id="iconpanel"> 
        <img alt="Logo" src="logo.gif"> 
        <hr 
         style="border: solid #d3d3d3 1px; height: 3px; background-color: #d3d3d3;"> 
        <form> 
         <fieldset id="fieldset"> 
          <legend>Personalia:</legend> 
          Name: <input type="text"><br> Email: <input 
           type="text"><br> Date of birth: <input type="text"> 
         </fieldset> 
        </form> 
       </div> 
      </td> 
     </tr> 
    </table> 
    <div id="main"></div> 
</body>

вместе с моим CSS:

#iconpanel { 
    border-radius: 25px; 
    border: 2px solid #d3d3d3; 
    padding: 20px; 
    width: 100%; 
    height: 100%; 
    align: center; 
} 

#fieldset { 
    border-radius: 25px; 
    border: 2px solid #d3d3d3; 
    padding: 20px; 
    width: 100%; 
    height: 100%; 
    align: center; 
}

я получаю этот выход:

, как вы можете видеть ширина моего fieldset длиннее родительской панели ...

Это мои первые шаги с Css. Может быть, вы можете помочь мне найти проблему.

Большое спасибо

Стефан

источник

2016-03-19 Stefan Beike

Добавить box-sizing: border-box; в #fieldset, чтобы получить то, что вы хотите, потому что теперь ширина элемента будет 100% + 20px из padding на каждой стороне.

С включенным box-sizing: border-box; CSS wil пытается реализовать прокладку внутри шириной набора, поэтому ширина 20px +? = 100%;

границы коробки Ширина и высота свойства включают отступы и границы, но не запас. Это полевая модель, используемая Internet Explorer, когда документ находится в режиме Quirks. Обратите внимание, что заполнение и граница будут внутри коробки, например. .box {width: 350px; border: 10px solid black;} приводит к коробке, отображаемой в браузере шириной: 350 пикселей. Содержимое поля не может быть отрицательным и равно 0, что делает невозможным использование граничного поля , чтобы элемент исчез.

Подробнее о box-sizing на Mozilla Developer Network.

источник

2016-03-19 18:19:55 Roy

сумасшедший материал !!! Прекрасно работает. Большое спасибо... –

Ширина Fieldset выпуска

ответ

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