Make one p tag full width in a div with padding

Question

I have the following html code.

body {
  background: lime !important;
}


/* Adding !important forces the browser to overwrite the default style applied by Bootstrap */

.mid-section {
  padding: 0 10px;
  background: white;
  border-color: black;
  border-width: 5 px;
  border-style: solid;
}

.import-notes {
  background: yellow;
}

<body>
  <div class="container">
    <h1>Testing </h1>
    <div class="mid-section">
      <p>(1)This is a test </p>
      <p>(2)This is a test </p>
      <p>(3)This is a test </p>
      <p class="import-notes">This is full width no padding</p>
    </div>
  </div>
</body>

I would like make <p class="import-notes"> to full width without padding.

If you don't want a padding in that tag, you must put the tag outside the div.mid-section — Diana Ysabel, Feb 01 '18 at 05:25

Danziger · Answer 1 · 2018-02-01T05:42:48.437

Workarounds:

One option would be to add these on .import-notes:

width: calc(100% + 20px)
position: relative;
left: -10px;

Or these, which is similar:

width: calc(100% + 20px);
margin-left: -10px;

Or just set two negative margins instead of one, so that you don't need to use calc():

margin-left: -10px;
margin-right: -10px;

You can see them in action here:

body {
  background: lime !important;
}

.mid-section {
  padding: 0 10px;
  background: white;
  border-color: black;
  border-width: 5 px;
  border-style: solid;
}

.import-notes {
  /* OPTION 1 */
  position: relative;
  left: -10px;
  width: calc(100% + 20px);
  
  /* OPTION 2 */
  /* margin-left: -10px;
  width: calc(100% + 20px); */

  /* OPTION 3 */
  /* margin-left: -10px;
  margin-right: -10px; */

  background: yellow;
}

<body>
  <div class="container">
    <h1>Testing </h1>
    <div class="mid-section">
      <p>(1)This is a test </p>
      <p>(2)This is a test </p>
      <p>(3)This is a test </p>
      <p class="import-notes">This is full width no padding</p>
    </div>
  </div>
</body>

✨ Actual Solution:

Alternatively, you could remove the padding from the parent and add it to the children, which looks to me more like an actual solution rather than a workaround.

What would happen if, for example, you change the <p> for <a>, which need to be clickable? You would need the padding to be inside it, not outside on the parent. Otherwise, the users won't be able to click on it on the sides, as they would be clicking on the parent instead.

body {
  background: lime !important;
}

.mid-section {
  background: white;
  border-color: black;
  border-width: 5 px;
  border-style: solid;
}

.mid-section > p {
  padding: 0 10px;
}

.mid-section > .import-notes {
  background: yellow;
  padding: 0;
}

<body>
  <div class="container">
    <h1>Testing </h1>
    <div class="mid-section">
      <p>(1)This is a test </p>
      <p>(2)This is a test </p>
      <p>(3)This is a test </p>
      <p class="import-notes">This is full width no padding</p>
    </div>
  </div>
</body>

score 1 · Answer 2 · answered Feb 01 '18 at 05:27

By using display:inline-block. You can achieve it.

.import-notes {
  background: yellow;
  display:inline-block;
}

body {
  background: lime !important;
}


/* Adding !important forces the browser to overwrite the default style applied by Bootstrap */

.mid-section {
  padding: 0 10px;
  background: white;
  border-color: black;
  border-width: 5 px;
  border-style: solid;
}

.import-notes {
  background: yellow;
display:inline-block;
}

<body>
  <div class="container">
    <h1>Testing </h1>
    <div class="mid-section">
      <p>(1)This is a test </p>
      <p>(2)This is a test </p>
      <p>(3)This is a test </p>
      <p class="import-notes">This is full width no padding</p>
    </div>
  </div>
</body>

Best solution for this is `display:inline-block`, so it will occupy width as it's content width so there would be no extra padding as you want. — Jani Devang, Feb 01 '18 at 05:33

score 1 · Answer 3 · answered Feb 01 '18 at 05:28

You can set negative margins to it, based on your parent element.

.import-notes {
  background: yellow;
  margin: 0 -10px; //negative margin based on parent element padding
}

See also: How do negative margins in CSS work and why is (margin-top:-5 != margin-bottom:5)?

body {
  background: lime !important;
}


/* Adding !important forces the browser to overwrite the default style applied by Bootstrap */

.mid-section {
  padding: 0 10px;
  background: white;
  border-color: black;
  border-width: 5 px;
  border-style: solid;
}

.import-notes {
  background: yellow;
  margin: 0 -10px;
}

<body>
  <div class="container">
    <h1>Testing </h1>
    <div class="mid-section">
      <p>(1)This is a test </p>
      <p>(2)This is a test </p>
      <p>(3)This is a test </p>
      <p class="import-notes">This is full width no padding</p>
    </div>
  </div>
</body>

score 1 · Answer 4 · answered Feb 01 '18 at 05:38

you can insert padding to childrens instead of parent,like this:

.mid-section p:not(.import-notes) {
    padding: 0 10px;
}

body {
  background: lime !important;
}

/* Adding !important forces the browser to overwrite the default style applied by Bootstrap */

.mid-section {
  background: white;
  border-color: black;
  border-width: 5px;
  border-style: solid;
}

.mid-section p:not(.import-notes) {
 padding: 0 10px;
}

.import-notes {
  background: yellow;
}

<div class="container">
    <h1>Testing </h1>
    <div class="mid-section">
      <p>(1)This is a test </p>
      <p>(2)This is a test </p>
      <p>(3)This is a test </p>
      <p class="import-notes">This is full width no padding</p>
    </div>
</div>

This is a good approach, but keep in mind it can mess with lists' bullet points for example. — leogama, Aug 06 '21 at 16:02

score 0 · Answer 5 · answered Feb 01 '18 at 05:26

body { background: lime !important; } /* Adding !important forces the browser to overwrite the default style applied by Bootstrap */
.mid-section { 
    padding:10px 0px;
    background : white;
    border-color : black;        
    border-width: 5 px;
    border-style: solid;
}
.mid-section .note {
  margin: 5px 10px;
}
.import-notes { 
    background : yellow;
    margin: 0px 0px;
}

<div class="container">
<h1>Testing </h1>
  <div class="mid-section">
     <p class='note'>(1)This is a test </p>
     <p class='note'>(2)This is a test </p>
     <p class='note'>(3)This is a test </p>
     <p class="import-notes">This is full width no padding</p>
   </div>
</div>

remove the padding in .mid-section, and insert the margin into all the p childs except the p tag except .import-notes

I think is not a solution for this problem, this occupies the whole width of it's parent div, so preffered solution for this problem is `display:inline-block`. — Jani Devang, Feb 01 '18 at 05:35
Thank you, Jani!. I think, we could solve some problem with different way. — Lead Developer, Feb 02 '18 at 03:41

score 0 · Answer 6 · answered Feb 01 '18 at 05:27

0

If by full width you mean width equal to the Text, you should give one more style to .import-notes, i.e display: inline-block;

answered Feb 01 '18 at 05:27

Aaditya Thakkar

1,750
13
13

score 0 · Accepted Answer · answered Feb 01 '18 at 05:27

<p class="import-notes">

already has full width but i think you want like this:

body { background: lime !important; } /* Adding !important forces the browser to overwrite the default style applied by Bootstrap */
.mid-section { 
    padding:0 10px;
    background : white;
    border-color : black;        
    border-width: 5 px;
    border-style: solid;
}
.import-notes { 
    background : yellow; 
    margin-left:-10px;              
    margin-right:-10px;              
}

<div class="container">
  <h1>Testing </h1>
  <div class="mid-section">
      <p>(1)This is a test </p>
      <p>(2)This is a test </p>
      <p>(3)This is a test </p>
      <p class="import-notes">This is full width no padding</p>
   </div>
</div>

Make one p tag full width in a div with padding

7 Answers7

Workarounds:

✨ Actual Solution: