Member Avatar for bsewell

Hi all,
I have a div where I would like to move the text inside it away from the border. A quick google found that I should use padding-left.

However, it doesn't seem to work (i've tried Safari and Firefox in case it was a browser issue). What have I missed?

#text-right2
{
	position:absolute;
	top:0px;
	right:0%;
	width:33%;
	height:80%;
	padding-left:20px;
}

Cheers,

  • 3 Contributors
  • 3 Replies
  • 2K Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by bsewell

Dani AI

Generated

A couple of quick checks before changing layout: in DevTools, select the element and watch the Computed panel as you toggle your padding rule. If padding is crossed out or overridden, you likely have a more specific selector (or a later rule) winning. Also confirm the page is in Standards Mode; a missing/legacy doctype can make padding behave unpredictably. Add this at the very top of the page if it is not already there:

<!DOCTYPE html>

As hinted, the box model is the usual culprit when an absolutely positioned, percentage‑width box appears to ignore padding. With percentage width, adding left padding makes the element wider, which can push its left edge under neighbors and give the impression that text did not move. A safe fix is to include padding inside the declared width:

#text-right2 {
  box-sizing: border-box;
  padding-inline-start: 1rem; /* use padding-left if you do not need RTL support */
}

If you prefer to keep the outer box’s math simple, follow ’s nudge and avoid padding on the positioned element. Instead, pad an inner wrapper so width math and positioning stay independent:

<div id="text-right2">
  <div class="inner">Your text...</div>
</div>

#text-right2 { /* your positioning rules */ }
#text-right2 .inner { padding-inline-start: 1rem; }

Two more gotchas I see often: remove fixed percentages on height unless you have a definite containing block, and give the element a temporary background or border while testing so you can see the actual content edge. Those small tweaks usually make the padding effect obvious and predictable.

Recommended Answers

All 3 Replies

Member Avatar for almostbob

zero has no dimension, 0px is 0em is 0pt is just 0,
you cant set an absolute width and expect padding to always work, if the text comes to less than 20px of the element width and there is not a place where the text can break, it wont break
height:80% wont always work either, page height is not a constant, not defined untill the page is rendered, window height is different between browser versions
browsers into quirks modes that act unpredictably
try

#text-right2 { position:absolute; top:0; bottom:auto; right:0; left:auto; width:33%; height:80%; padding-left:20px; }

still will not work in all browsers

Member Avatar for clair0917

Hi all,
I have a div where I would like to move the text inside it away from the border. A quick google found that I should use padding-left.

However, it doesn't seem to work (i've tried Safari and Firefox in case it was a browser issue). What have I missed?

#text-right2
{
	position:absolute;
	top:0px;
	right:0%;
	width:33%;
	height:80%;
	padding-left:20px;
}

Cheers,

Try removing your absolute position. It may be locking the text.

Member Avatar for bsewell

I tried both solutions in both Firefox and Safari but they didn't work.

In the end, I found a better solution to fix the issue. I had another div below this div, which was transparent so I just changed the dimensions of the div I was trying to set padding-left to.

Thanks for your help anyway :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.