CSS: Is It Correct That Text Content of a Div Overflows into The Padding

CSS: Is it correct that text content of a div overflows into the padding?

This is the correct behavior. overflow: hidden will clip content that extends outside the box. Padding is inside the box, so content will happily overflow into that space if necessary.

CSS Box model
(source)

To get the effect you seem to be aiming for, one solution is wrap your div.foo in an another div and set the background on that one instead, like this:

<div class="foowrapper">
    <div class="foo">purrrrrrrrr</div>
</div>

.foo {
    overflow: hidden;
    width: 40px;
}
.foowrapper {
    padding-right: 10px
    background: red;
    border: 1px solid green;
}

Padding overflows the container in a text field

Negate the padding you applied. Or use border-box.
calc function is very handy, and widely supported, use it!

.contenedor_section{  padding: 20px;  background:red;}.estilo_input_text {    display: block;    width: calc(100% - 24px);/* you have to negate the padding of 12px on each side */    height: 34px;    padding: 6px 12px;    font-size: 14px;    line-height: 1.42857143;    color: #555;    background-color: #fff;    border: 1px solid #ccc;    border-radius: 4px;    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */  font-style: italic;  color: #999999 !important;}

  <div class='contenedor_section'>    <input type='text' placeholder='name' class='estilo_input_text'>  </div>

How to prevent textarea content from overflowing into padding?

I could not find a way of doing it with padding but the same sort of effect can be achieved by setting the top border of the textarea instead of the padding:

body {
    background: grey;
}
textarea {
    width: 100%;
    margin: 0;
    border-top-width: 1em;
    border-top-color: white;
    resize: none;
}

<body>
    <textarea name="" id="" cols="30" rows="4"></textarea>
</body>

overflow: hidden behind padding

Simply wrap your content in another element and apply the overflow: hidden to that instead:

table {   width: 100px;    table-layout:fixed;  }
td {  border: 1px solid red;  padding: 10px;}
.inner {    border: 1px solid blue;    overflow: hidden;    text-overflow: ellipsis;}

<table>    <tr>        <td><div class="inner">123456789012345678901234567890</div></td>    </tr></table>

Add right padding to text inside div

If you've an overflow, the text will be displayed in front of your padding. So you either need an additional div or apply the overflow to the p.

.div-2 {
    width: 150px;
    padding-right: 10px;
    padding-left: 10px;
}

.div-2 p {
    white-space: nowrap;
    overflow: hidden;
    border: 1px yellow solid;
}

<div style="background-color: #7B92D3;" class="div-2">
    <p id="text">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>

Div contents overflowing from margins

JSFiddle

The key to getting this is to use a fluid layout. Changing all of your width, left/right padding, and left/right margins to use percents should do the trick. Also they should add up to 100%.

Remove this CSS

width:20%;
padding-right:3px;

Replace with

width: 19%;
padding-right: 1%;

Also you'll need to add float: right to your CSS for #contentdiv

CSS property to pad text inside of div

I see a lot of answers here that have you subtracting from the width of the div and/or using box-sizing, but all you need to do is apply the padding the child elements of the div in question. So, for example, if you have some markup like this:

<div id="container">
    <p id="text">Find Agents</p>
</div>

All you need to do is apply this CSS:

#text {
    padding: 10px;
}

Here is a fiddle showing the difference: https://jsfiddle.net/CHCVF/2/

Or, better yet, if you have multiple elements and don't feel like giving them all the same class, you can do something like this:

.container * {
    padding: 5px 10px;
}

Which will select all of the child elements and assign them the padding you want. Here is a fiddle of that in action: https://jsfiddle.net/CHCVF/3/

Left padding overwritten on overflow?

One way is to make the tick icon to have same white background color, so that it covers any overflowed text on the left. I also significantly reduced the size of the style code.

jsFiddle

body {  background: #fff;}.container {  position: relative;  margin: 20px 0;}.input {  cursor: text;  width: 100px;  display: inline-block;  vertical-align: top;  overflow: auto;  font-family: Quicksand, sans-serif;  font-size: 14px;  line-height: normal;  white-space: nowrap;  outline: 0;  border-radius: 3px;  border: 1px solid #999;  padding: 4px 10px;  box-sizing: border-box;  overflow: hidden;}.input:not(:empty) {  color: #000;  width: 130px;  right: 0;  padding-left: 24px;}.input:not(:empty):before {  content: "";  position: absolute;  left: 1px;  top: 1px;  bottom: 1px;  width: 22px;  border-radius: 3px;  background: #fff url(https://i.stack.imgur.com/A45oq.png) center / 70% no-repeat;}.input:empty {  background: pink;  color: red;  position: relative;  right: -24px;}.input:empty:before {  content: attr(data-placeholder);}

<div class="container">  <div contentEditable=true class="input" spellcheck="false" onkeyup="this.setAttribute('value', this.value);" onkeypress="javascript:return (event.keyCode != 13)" value="" data-placeholder="placeholder"></div></div>
<div class="container">  <div contentEditable=true class="input" spellcheck="false" onkeyup="this.setAttribute('value', this.value);" onkeypress="javascript:return (event.keyCode != 13)" value="" data-placeholder="placeholder"></div></div>

CSS: Is It Correct That Text Content of a Div Overflows into The Padding