CODEWITHSUNDEEP
xhtmlinlinecss
Ozzy
Ozzy

Reputation: 10643

XHTML/CSS Padding on inline element with linebreak

I have an inline element with a line break in it. It has padding on all sides. However, the side padding on where the line break cuts the element is not there.

This is what i mean:

http://jsfiddle.net/4Gs2E/

There should be 20px padding on the right of tag and left of with but there isnt. The only other way I can see this working is if i create a new element for every line but this content will be dynamically generated and will not be in a fixed width container so i dont see that working out. Is there any other way I can do this in css without any javascript?

I want the final result to look like this : http://jsfiddle.net/GNsw3/

but without any extra elements

i also need this to work with display inline only as I want the background to wrap around the text as inline block doesnt do this

Is this possible?

edit, altered the examples to make what i want more visible:

current http://jsfiddle.net/4Gs2E/2/

what i want it to look like http://jsfiddle.net/GNsw3/1/

Upvotes: 5

Views: 1948

Answers (5)

Łukasz Daniluk
Łukasz Daniluk

Reputation: 470

I just wanted to make css-animated menu for myself. Workaround I have found is to wrap your INLINE-BLOCK element (change in css if necessary, lets call it a span with such an attribute for purpose of this solution) into block element. Then I'm using margins of span as it was padding for the surrounding div.

div.menuopt {
    margin: 10px;
    padding: 0px;
    padding-left: 0px;
    overflow: hidden;
    width: 500px;
    height: 150px;
    background: grey;
}
span.menuopt {
    display: inline-block;
    margin: 0px;
    padding: 0px;
    margin-left: 150px;
    margin-top: 10px;
    font-size: 25px;
}

Example: http://jsfiddle.net/ApbQS/

hope it will help anyone

Upvotes: 0

Marat Tanalin
Marat Tanalin

Reputation: 14123

Usually that is implemented by wrapping each word in an own SPAN which has border.

Upvotes: 0

ausi
ausi

Reputation: 7413

In some cases you can use box-shadow for a workaround.

Move the right and left padding of the element to its parent and add two box-shadows.

The result: http://jsfiddle.net/FpLCt/1/

Browser support for box-shadow: http://caniuse.com/css-boxshadow

Update:

There is also a new css property for this issue called box-decoration-break. It is currently only supported by opera, but hopefully more browsers will implement this soon.

Hope this helps

Upvotes: 5

Chris Fletcher
Chris Fletcher

Reputation: 2387

Found a solution for you, but it ain't pretty :)

Since you can't target the <br> element with css, you have to use javascript. Here's how you can accomplish what you want with jQuery:

// Add two spaces before and after any <br /> tag
$('br').replaceWith('&nbsp;&nbsp;<br />&nbsp;&nbsp;');

Play with the number of &nbsp; elements to acheive your padding on both ends.

Here's an updated Fiddle demo: http://jsfiddle.net/4Gs2E/8/

Upvotes: 1

GolezTrol
GolezTrol

Reputation: 116110

Maybe you can use float: left instead of display: inline:

http://jsfiddle.net/GolezTrol/4Gs2E/1/

Upvotes: 0

Related Questions