Search
 
SCRIPT & CODE EXAMPLE
 
CODE EXAMPLE FOR CSS

what happens when the width is 0 and there is a border and box-sizing is set to border-box?



The content area is anything left after you subtract the width of the border.

    | The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified ‘width’ and ‘height’ properties.

Specified width = 10 px
border width = 10 px
Content width = Specified width (10 px) - border width (10 px)
Content width 10 - 10 = 0

Specified width = 0 px
border width = 10 px
Content width = Specified width (0 px) - border width (10 px)
Content width 0 - 10 = -10 ( which would remove the 10 px used by the border)

But

    | As the content width and height cannot be negative ([CSS21], section 10.2), this computation is floored at 0.

Specified width = 0 px
border width = 10 px
Content width = Specified width (0 px) - border width (10 px)
Content width 0 - 10 = 0 ( which doesn't remove the 10 px used by the border)

If you don't want to use display:none; or visibility:hidden;, you need to set both the width:XX; and the border-right:XX; to zero.
 
PREVIOUS NEXT
Tagged: #width #border #set
ADD COMMENT
Topic
Name
5+5 =