Set padding-left and padding-right to 10% of element width

html padding-left
margin css
padding vs margin
css padding order
css border
padding-right not working
padding-top
div padding html

Is there a way to set padding-left and padding-right to 10% of element width in Flexbox. I tried with padding: 0 10%;, but its not 10% of element width.

.flex {
  display: flex;
}

.item1 {
  padding: 0 3px;
  /*calculated depending on text width*/
}

.item2 {
  padding: 0 16px;
  /*calculated depending on text width*/
}

.item3 {
  padding: 0 34px;
  /*calculated depending on text width*/
}


/*can it be done with one rule for items*/

.item {
  /*padding: 0 (width/10); something like this*/
}
<div class="flex">
  <div class="item1">itm1</div>
  <div class="item2">item2 with greater width</div>
  <div class="item3">item3 with the greatest width ....................................</div>
</div>

Here is a hacky idea that works only in Chrome. Since percentage padding will create a cycle, the use of the animation will force the recalculation of the width again:

.item {
  display:table; /* OR inline-table if you want the element to be inline */
  border:1px solid;
}
.item:before,
.item:after{
  content:"";
  display:table-cell;
  padding:0 5%;
  width:0;
  animation:fix 5s linear infinite;
}

@keyframes fix {
  to {
    width:0.1px;
  }
}
<div class="item">itm1</div>
  <div class="item">item2 with greater width</div>
  <div class="item">item3 with the greatest width ....................................</div>

padding, The padding CSS shorthand property sets the padding area on all four An element's padding area is the space between its content and its <percentage>: The size of the padding as a percentage, relative to the width of the containing 10px padding */ /* left and right: 20px padding */ padding: 10px 3%� In general, wrapping elements in an extra div is a good way to pad elements without pushing the overall width of the element beyond it's parent container. – Jake Wilson Aug 23 '11 at 22:13 1


Because using % in padding option refers it's parent width , so let say if you set flex box width to 100px , with 30% padding in child div will make 30px padding.

padding-right, The padding-right CSS property sets the width of the padding area on the An element's padding area is the space between its content and its border. padding-right: 2cm; /* <percentage> value */ padding-right: 10%; /* Global box model � padding-top , padding-bottom , padding-left and the padding� Let’s say you have set the width of an element to 50% and also applied a margin of 15px on it. At 1200px, its width would be 600px and its margin would be 15px. At 769px, its width would be


Here is a simple example of that

.upper {
  margin: 30px;
  display: flex;
  flex-direction: row;
  width: 300px;
  height: 80px;
  border: 1px red solid;
  padding: 5px;
  /* this */
}

.upper>div {
  flex: 1 1 auto;
  border: 1px red solid;
  text-align: center;
  margin: 10px;
  /* and that, will result in a 10px gap */
}
<div class="upper">
  <div>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa<br/>aaa</div>
  <div>aaa<br/>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</div>

CSS padding property, Set the padding for all four sides of a <p> element to 35 pixels: p { top padding is 10px; right padding is 5px; bottom padding is 15px; left padding is 20px Specifies the padding in percent of the width of the containing element, Play it �. Padding is given space between another element or generate space around an element’s content. Padding in HTML paragraph use only by adding CSS code. It makes a <p> tag more stylish and Allegiant. Here are properties of for it:-padding-top; padding-left; padding-bottom; padding-right; padding ( Element get padding from all site at one shot)


CSS padding-left property, The padding-left property sets the left padding (space) of an element. Set the left padding for a <p> element to 10% of the width of the element: p.ex1 { An element's padding is the space between its content and its border. The padding property is a shorthand property for: padding-top; padding-right; padding-bottom; padding-left; Note: Padding creates extra space within an element, while margin creates extra space around an element. This property can have from one to four values.


Css/Training/padding and margin, padding. The padding properties specify the width of the padding area of a box. [ Syntax] The padding property is a shorthand property for setting 'padding-top', top padding is 10px, right and left paddings are 20px, bottom padding is 30px. In this example, although the .box element is given an explicit width of 400px, the actual rendered width of the element on the page will be 440px. This takes into account not only the 400px width, but also the 20px of left padding and the 20px of right padding (defined with padding shorthand in the previous example).


How to Set CSS Margins and Padding (And Cool Layout Tricks , The W3C box model considers the width of the element to be equal to the content of top | right | bottom | left */ padding: 10px 10% 2em 15%;. your footer not ignoring body padding, look through console at that element sizes and you will see that width of your footer is 100% of window width + 10px from left padding + 10px from right padding. you can use calc function in css: https://developer.mozilla.org/en-US/docs/Web/CSS/calc. #footer { width: calc(100% - 20px);}