Box-shadow on parent has to ignore children margin











up vote
0
down vote

favorite












Let's say we have this simple markup with the following styles:






.outer {

  box-shadow: 0 0 5px 2px red;

  padding: 2px;

}



.inner {

  margin-right: 25px;

}

<span class="outer">

  <span class="inner">Content</span>

</span>





This results in the .outer span have the width of the .inner which includes a 25px margin. What I would like to happen is for .outer to have the box-shadow spread over its own width excluding inners margin.



Is that at all possible ?






html css







share|improve this question
























  • if you apply the box-shadow to inner and margin to outer the result could be right?
    – fcalderan
    Nov 9 at 9:04










  • spans are used as inline elements. If you want the containing span to be narrower than its conained elements, then you should not be using spans at all here.
    – The Coprolal
    Nov 9 at 9:05










  • its own width excluding inners margin. --> this is not logica; because that margin is defining the width
    – Temani Afif
    Nov 9 at 9:09

















up vote
0
down vote

favorite












Let's say we have this simple markup with the following styles:






.outer {

  box-shadow: 0 0 5px 2px red;

  padding: 2px;

}



.inner {

  margin-right: 25px;

}

<span class="outer">

  <span class="inner">Content</span>

</span>





This results in the .outer span have the width of the .inner which includes a 25px margin. What I would like to happen is for .outer to have the box-shadow spread over its own width excluding inners margin.



Is that at all possible ?






html css







share|improve this question
























  • if you apply the box-shadow to inner and margin to outer the result could be right?
    – fcalderan
    Nov 9 at 9:04










  • spans are used as inline elements. If you want the containing span to be narrower than its conained elements, then you should not be using spans at all here.
    – The Coprolal
    Nov 9 at 9:05










  • its own width excluding inners margin. --> this is not logica; because that margin is defining the width
    – Temani Afif
    Nov 9 at 9:09















up vote
0
down vote

favorite









up vote
0
down vote

favorite











Let's say we have this simple markup with the following styles:






.outer {

  box-shadow: 0 0 5px 2px red;

  padding: 2px;

}



.inner {

  margin-right: 25px;

}

<span class="outer">

  <span class="inner">Content</span>

</span>





This results in the .outer span have the width of the .inner which includes a 25px margin. What I would like to happen is for .outer to have the box-shadow spread over its own width excluding inners margin.



Is that at all possible ?






html css







share|improve this question















Let's say we have this simple markup with the following styles:






.outer {

  box-shadow: 0 0 5px 2px red;

  padding: 2px;

}



.inner {

  margin-right: 25px;

}

<span class="outer">

  <span class="inner">Content</span>

</span>





This results in the .outer span have the width of the .inner which includes a 25px margin. What I would like to happen is for .outer to have the box-shadow spread over its own width excluding inners margin.



Is that at all possible ?






.outer {

  box-shadow: 0 0 5px 2px red;

  padding: 2px;

}



.inner {

  margin-right: 25px;

}

<span class="outer">

  <span class="inner">Content</span>

</span>





.outer {

  box-shadow: 0 0 5px 2px red;

  padding: 2px;

}



.inner {

  margin-right: 25px;

}

<span class="outer">

  <span class="inner">Content</span>

</span>





html css




html css






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 9 at 9:00









Gerard

11k41737




11k41737










asked Nov 9 at 8:58









As above so below

113




113












  • if you apply the box-shadow to inner and margin to outer the result could be right?
    – fcalderan
    Nov 9 at 9:04










  • spans are used as inline elements. If you want the containing span to be narrower than its conained elements, then you should not be using spans at all here.
    – The Coprolal
    Nov 9 at 9:05










  • its own width excluding inners margin. --> this is not logica; because that margin is defining the width
    – Temani Afif
    Nov 9 at 9:09




















  • if you apply the box-shadow to inner and margin to outer the result could be right?
    – fcalderan
    Nov 9 at 9:04










  • spans are used as inline elements. If you want the containing span to be narrower than its conained elements, then you should not be using spans at all here.
    – The Coprolal
    Nov 9 at 9:05










  • its own width excluding inners margin. --> this is not logica; because that margin is defining the width
    – Temani Afif
    Nov 9 at 9:09


















if you apply the box-shadow to inner and margin to outer the result could be right?
– fcalderan
Nov 9 at 9:04




if you apply the box-shadow to inner and margin to outer the result could be right?
– fcalderan
Nov 9 at 9:04












spans are used as inline elements. If you want the containing span to be narrower than its conained elements, then you should not be using spans at all here.
– The Coprolal
Nov 9 at 9:05




spans are used as inline elements. If you want the containing span to be narrower than its conained elements, then you should not be using spans at all here.
– The Coprolal
Nov 9 at 9:05












its own width excluding inners margin. --> this is not logica; because that margin is defining the width
– Temani Afif
Nov 9 at 9:09






its own width excluding inners margin. --> this is not logica; because that margin is defining the width
– Temani Afif
Nov 9 at 9:09














1 Answer
1






active

oldest

votes

















up vote
0
down vote













How about adding box-shadow, padding to .inner instead of .outer






.inner {

  box-shadow: 0 0 5px 2px red;

  padding: 2px;

  margin-right: 25px;

}

<span class="outer">

  <span class="inner">Content</span>

</span>








share|improve this answer





















  • Unfortunately I can't do that as I don't have control over .inner in my app. I can only control what happens to .outer
    – As above so below
    Nov 9 at 9:11










  • @Asabovesobelow You can control children using CSS.
    – K K
    Nov 9 at 9:15











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














 

draft saved


draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53222568%2fbox-shadow-on-parent-has-to-ignore-children-margin%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes








up vote
0
down vote













How about adding box-shadow, padding to .inner instead of .outer






.inner {

  box-shadow: 0 0 5px 2px red;

  padding: 2px;

  margin-right: 25px;

}

<span class="outer">

  <span class="inner">Content</span>

</span>








share|improve this answer





















  • Unfortunately I can't do that as I don't have control over .inner in my app. I can only control what happens to .outer
    – As above so below
    Nov 9 at 9:11










  • @Asabovesobelow You can control children using CSS.
    – K K
    Nov 9 at 9:15















up vote
0
down vote













How about adding box-shadow, padding to .inner instead of .outer






.inner {

  box-shadow: 0 0 5px 2px red;

  padding: 2px;

  margin-right: 25px;

}

<span class="outer">

  <span class="inner">Content</span>

</span>








share|improve this answer





















  • Unfortunately I can't do that as I don't have control over .inner in my app. I can only control what happens to .outer
    – As above so below
    Nov 9 at 9:11










  • @Asabovesobelow You can control children using CSS.
    – K K
    Nov 9 at 9:15













up vote
0
down vote










up vote
0
down vote









How about adding box-shadow, padding to .inner instead of .outer






.inner {

  box-shadow: 0 0 5px 2px red;

  padding: 2px;

  margin-right: 25px;

}

<span class="outer">

  <span class="inner">Content</span>

</span>








share|improve this answer












How about adding box-shadow, padding to .inner instead of .outer






.inner {

  box-shadow: 0 0 5px 2px red;

  padding: 2px;

  margin-right: 25px;

}

<span class="outer">

  <span class="inner">Content</span>

</span>








.inner {

  box-shadow: 0 0 5px 2px red;

  padding: 2px;

  margin-right: 25px;

}

<span class="outer">

  <span class="inner">Content</span>

</span>





.inner {

  box-shadow: 0 0 5px 2px red;

  padding: 2px;

  margin-right: 25px;

}

<span class="outer">

  <span class="inner">Content</span>

</span>






share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 9 at 9:05









K K

13.2k21629




13.2k21629












  • Unfortunately I can't do that as I don't have control over .inner in my app. I can only control what happens to .outer
    – As above so below
    Nov 9 at 9:11










  • @Asabovesobelow You can control children using CSS.
    – K K
    Nov 9 at 9:15


















  • Unfortunately I can't do that as I don't have control over .inner in my app. I can only control what happens to .outer
    – As above so below
    Nov 9 at 9:11










  • @Asabovesobelow You can control children using CSS.
    – K K
    Nov 9 at 9:15
















Unfortunately I can't do that as I don't have control over .inner in my app. I can only control what happens to .outer
– As above so below
Nov 9 at 9:11




Unfortunately I can't do that as I don't have control over .inner in my app. I can only control what happens to .outer
– As above so below
Nov 9 at 9:11












@Asabovesobelow You can control children using CSS.
– K K
Nov 9 at 9:15




@Asabovesobelow You can control children using CSS.
– K K
Nov 9 at 9:15


















 

draft saved


draft discarded



















































 


draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53222568%2fbox-shadow-on-parent-has-to-ignore-children-margin%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







-