CSS: input text inside table cell without overflow

Tweet

If you ever worked with forms and tables together (and I believe you have at least once in your web developing career), you surely have found that input boxes width can be difficult to manage.
Presume you have a table and inside a <td> you have an input text box which should have a 100% width. The input box should stay inside the <td> and fill all the available space. However that doesn't happen, and the input box overflows the available space. Why?

Explanation

The reason is because you have set borders and paddings. Let me show you an example: your input box has a width set to 100%, a border of 1px each side and a padding of 2px each side. That means, the input box width will be:

100% + 2*(2px+1px) = 100% + 6px

Those extra 6 pixels are your trouble, and the input box will overflow by those 6px.

CSS: padding vs margin

Tweet

What is padding in CSS? And margin? What's the difference?

I know that the subject is very basic, but recently I noticed that people tend to confuse them, use them together (which is ok) or switch from one to the other without knowing why. Sometimes using them  - especially with transparent elements - we might not notice the difference between the two properties.

The definitions

Let's start from the beginning.
Margin: it defines the distance between the element and other elements. It's like a surrounding space and determines what's the measure of that space. The margin is outside the object and it is always transparent.
Padding: it defines the distance from the border of the element and its content. The padding is inside the object and it takes its background color.