locked
How to have the border be inside of its div RRS feed

  • Question

  • User1868852945 posted

    Is there a way to have a border that does increase the size of its div?

    If the div height is 16px and border as border: solid 2px black;, I want the div height to remain at 16px and not increase to 18px (which occurs due to the border).

    My requirement will not allow changing the div height to 14px.

    Thanks for any thought son this.

    Monday, December 19, 2016 10:24 PM

Answers

  • User-474980206 posted
    If it's a modern browser, set box sizing:

    box-sizing: border-box;

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, December 20, 2016 1:37 AM
  • User-707554951 posted

    Hi, gunderj.

    For your problem, as brue said, you could set  box-sizing for Div.

     <style type="text/css">
            #MyDiv {
                box-sizing: border-box;
                width: 100px;
                height: 100px;
                border: 10px solid blue;
                background: red;
            }
        </style>
    
    <div id="MyDiv">   
        </div>

    Output In Chrome:



    Best Regards

    Cathy

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, December 20, 2016 9:41 AM

All replies

  • User-474980206 posted
    If it's a modern browser, set box sizing:

    box-sizing: border-box;

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, December 20, 2016 1:37 AM
  • User-707554951 posted

    Hi, gunderj.

    For your problem, as brue said, you could set  box-sizing for Div.

     <style type="text/css">
            #MyDiv {
                box-sizing: border-box;
                width: 100px;
                height: 100px;
                border: 10px solid blue;
                background: red;
            }
        </style>
    
    <div id="MyDiv">   
        </div>

    Output In Chrome:



    Best Regards

    Cathy

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, December 20, 2016 9:41 AM