Member Avatar for oneat

Is it possible to set margin in percents ?
And
How can I set only text margin without moving div where it's in?

  • 3 Contributors
  • 6 Replies
  • 134 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

Short answer: yes — percent values work for margins. What matters is how those percentages are calculated and which property you use.

Percent margins are computed against the containing block’s width (so margin-top: 10% is 10% of the container width, not its height). That behavior is defined in the CSS spec and explained on MDN, so expect consistent results across modern browsers: MDN: margin and MDN: percentage values.

If the goal is to move only the text inside a div without shifting the div itself in the document flow, avoid setting margins on the container. Use one of these patterns instead:

/* keep the box in place, add inner spacing */
.container { padding-left: 5%; }

/* wrap text and shift the inner element */
.container span { display: inline-block; margin-left: 5%; }

/* shift visually without affecting layout */
.container p { transform: translateX(5%); }

/* indent only the first line */
.container { text-indent: 5%; }

Notes and gotchas: was right to suggest wrapping the text; ’s “draw boxes” advice is useful — using an inner box (a p or span) isolates visual moves. Use padding when you want interior spacing that never changes the container’s outer position. Use transform: translateX() when you need a visual shift that does not affect surrounding layout. Remember margin collapse (top/bottom) and the difference between inline versus block behavior when choosing where to apply spacing.

Recommended Answers

All 6 Replies

Member Avatar for JugglerDrummer

1 yes see here

2. just put the text in a paragraph element or another div and set the margin on that. :D

Member Avatar for oneat

I got this.
But is there something other ?

Member Avatar for oneat

I mean 2 answer of course

Member Avatar for JugglerDrummer

what else would you like to know? :)

Member Avatar for oneat

Another way of doing point 2.

Member Avatar for almostbob

not really,
that is the best answer you are going to find, accurate and simple, code compliant, current practice, proper use of styling.

as a visual aid
draw some boxes, boxes represent html block elements
you can create/move/edit a box inside another box easily, change its border, change its margins, change its content, if you want to change part in a box, you draw another box around the part and change that

Edited by almostbob because: n/a
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.