Solved

Valid webkit-box-sizing

Posted on 2016-09-07
5
32 Views
Last Modified: 2016-09-07
I inherited a web site and one of the pages has the following code on it.

What is the VALID setting for this?
ScreenSP.png
0
Comment
Question by:lrbrister
  • 3
  • 2
5 Comments
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41787921
box-sizing (https://developer.mozilla.org/en/docs/Web/CSS/box-sizing)

Is the style declaration to control how padding and borders are treated with respect to the container (see box model)

The box model says if you have a container with width X then border, padding will be applied to the outside of the box - making the width (and height) greater.

When box-sizing is set to border-box then any padding / borders are included in the width of the container i.e. they don't increase the size of the container.
-webkit and -moz are just the Chrome (webkit) and FireFox (moz) specific versions of the style. As most browsers support this style the custom styles are no longer needed.
0
 

Author Comment

by:lrbrister
ID: 41787936
Julian,
  So I can remove that from the Page?
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41787944
Not sure why they have a zero in there - won't be recognised as far as I know.
Valid values are
content-box => Default box model - borders and padding outside the box.
border-box => keep width unchanged - put borders and padding inside the box.
0
 
LVL 51

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41787950
I believe so - I tried to find a use case for a zero - could not.
Tried a test page setting it to zero - browser ignores it - removes it from the styles in the console so I am assuming it does nothing.

Sometimes there are quirky things that unconventional use of styles help to achieve - but they are risky because they don't necessarily have a long life span.

I would remove it and see what the effect is. If there is an effect it should be one of two things.
Content will expand (in which case make it border-box)
Content will contract (in which case make it content-box)
0
 

Author Closing Comment

by:lrbrister
ID: 41787952
I removed it... no changes at all that I can see,

Will just wait for someone to yell.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now