Giving different padding inline spans
0
I have three spans inlined 2 image, and one text. text is between two images. So I am trying put proper height differently. So I gave class differently. But padding is not work. And also I want to put image2 right corner.
the display is like 
<dl class="accordion">
<dt>
<span class="image"><img src="img/question-blue.png"></span>
<span class="text">Text Text</span>
<span class="image2"><img src="img/open-blue-big.png"></span>
</dt>
</dl>
My css on span classes don't work?
dd {
margin: 0;
}
dl.accordion {
font-family: helvetica Neue;
width:100%;
margin:20px auto 30px;
font-size:16px;
}
dl.accordion dt {
border-bottom:1px solid #EEE;
height:auto;
text-indent:10px;
line-height:40px;
color:#333;
font-weight:bold;
cursor:pointer;}
dl.accordion dt.open {
background:url(../img/close.png) 97% center no-repeat,-moz-linear-gradient(top, #C6F0FE, #27BCF9);
background:url(../img/close.png) 97% center no-repeat,-webkit-gradient(linear, left top, left bottom, from(#C6F0FE), to(#27BCF9));}
dl.accordion dd {
background:#FFF;
padding:10px;
line-height:1.5;
display:none;
}
.text {
display: inline-block;
padding-top: 20px;
padding-bottom: 20px;
}
.image2 {
display: inline-block;
text-align: right;
}
html css
add a comment |
0
I have three spans inlined 2 image, and one text. text is between two images. So I am trying put proper height differently. So I gave class differently. But padding is not work. And also I want to put image2 right corner.
the display is like
<dl class="accordion">
<dt>
<span class="image"><img src="img/question-blue.png"></span>
<span class="text">Text Text</span>
<span class="image2"><img src="img/open-blue-big.png"></span>
</dt>
</dl>
My css on span classes don't work?
dd {
margin: 0;
}
dl.accordion {
font-family: helvetica Neue;
width:100%;
margin:20px auto 30px;
font-size:16px;
}
dl.accordion dt {
border-bottom:1px solid #EEE;
height:auto;
text-indent:10px;
line-height:40px;
color:#333;
font-weight:bold;
cursor:pointer;}
dl.accordion dt.open {
background:url(../img/close.png) 97% center no-repeat,-moz-linear-gradient(top, #C6F0FE, #27BCF9);
background:url(../img/close.png) 97% center no-repeat,-webkit-gradient(linear, left top, left bottom, from(#C6F0FE), to(#27BCF9));}
dl.accordion dd {
background:#FFF;
padding:10px;
line-height:1.5;
display:none;
}
.text {
display: inline-block;
padding-top: 20px;
padding-bottom: 20px;
}
.image2 {
display: inline-block;
text-align: right;
}
html css
Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. - We cannot tell you what's wrong with your CSS if we cannot see it!
– Tyler Roper
Nov 20 '18 at 1:23
sorry mate, I updated the question. @TylerRoper
– user10378098
Nov 20 '18 at 1:24
You need to clarify your question. You have padding on top and bottom of your text spans and don't have it on your image spans, exactly like your CSS indicates you should. What is the problem?
– ecg8
Nov 20 '18 at 1:35
I update the question and put an image to explain. I am giving padding just text because text is look downside. But my padding doesnt't work to put it middle of the line. Also, image2 button is doesnt go to rigt corner! @ecg8
– user10378098
Nov 20 '18 at 1:40
So, your issue isn't about padding. The issue is that you want to vertically align the text in the middle of the span?
– ecg8
Nov 20 '18 at 1:43
add a comment |
0
0
0
I have three spans inlined 2 image, and one text. text is between two images. So I am trying put proper height differently. So I gave class differently. But padding is not work. And also I want to put image2 right corner.
the display is like
<dl class="accordion">
<dt>
<span class="image"><img src="img/question-blue.png"></span>
<span class="text">Text Text</span>
<span class="image2"><img src="img/open-blue-big.png"></span>
</dt>
</dl>
My css on span classes don't work?
dd {
margin: 0;
}
dl.accordion {
font-family: helvetica Neue;
width:100%;
margin:20px auto 30px;
font-size:16px;
}
dl.accordion dt {
border-bottom:1px solid #EEE;
height:auto;
text-indent:10px;
line-height:40px;
color:#333;
font-weight:bold;
cursor:pointer;}
dl.accordion dt.open {
background:url(../img/close.png) 97% center no-repeat,-moz-linear-gradient(top, #C6F0FE, #27BCF9);
background:url(../img/close.png) 97% center no-repeat,-webkit-gradient(linear, left top, left bottom, from(#C6F0FE), to(#27BCF9));}
dl.accordion dd {
background:#FFF;
padding:10px;
line-height:1.5;
display:none;
}
.text {
display: inline-block;
padding-top: 20px;
padding-bottom: 20px;
}
.image2 {
display: inline-block;
text-align: right;
}
html css
I have three spans inlined 2 image, and one text. text is between two images. So I am trying put proper height differently. So I gave class differently. But padding is not work. And also I want to put image2 right corner.
the display is like
<dl class="accordion">
<dt>
<span class="image"><img src="img/question-blue.png"></span>
<span class="text">Text Text</span>
<span class="image2"><img src="img/open-blue-big.png"></span>
</dt>
</dl>
My css on span classes don't work?
dd {
margin: 0;
}
dl.accordion {
font-family: helvetica Neue;
width:100%;
margin:20px auto 30px;
font-size:16px;
}
dl.accordion dt {
border-bottom:1px solid #EEE;
height:auto;
text-indent:10px;
line-height:40px;
color:#333;
font-weight:bold;
cursor:pointer;}
dl.accordion dt.open {
background:url(../img/close.png) 97% center no-repeat,-moz-linear-gradient(top, #C6F0FE, #27BCF9);
background:url(../img/close.png) 97% center no-repeat,-webkit-gradient(linear, left top, left bottom, from(#C6F0FE), to(#27BCF9));}
dl.accordion dd {
background:#FFF;
padding:10px;
line-height:1.5;
display:none;
}
.text {
display: inline-block;
padding-top: 20px;
padding-bottom: 20px;
}
.image2 {
display: inline-block;
text-align: right;
}
html css
html css
edited Nov 20 '18 at 1:39
asked Nov 20 '18 at 1:21
user10378098
Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. - We cannot tell you what's wrong with your CSS if we cannot see it!
– Tyler Roper
Nov 20 '18 at 1:23
sorry mate, I updated the question. @TylerRoper
– user10378098
Nov 20 '18 at 1:24
You need to clarify your question. You have padding on top and bottom of your text spans and don't have it on your image spans, exactly like your CSS indicates you should. What is the problem?
– ecg8
Nov 20 '18 at 1:35
I update the question and put an image to explain. I am giving padding just text because text is look downside. But my padding doesnt't work to put it middle of the line. Also, image2 button is doesnt go to rigt corner! @ecg8
– user10378098
Nov 20 '18 at 1:40
So, your issue isn't about padding. The issue is that you want to vertically align the text in the middle of the span?
– ecg8
Nov 20 '18 at 1:43
add a comment |
Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. - We cannot tell you what's wrong with your CSS if we cannot see it!
– Tyler Roper
Nov 20 '18 at 1:23
sorry mate, I updated the question. @TylerRoper
– user10378098
Nov 20 '18 at 1:24
You need to clarify your question. You have padding on top and bottom of your text spans and don't have it on your image spans, exactly like your CSS indicates you should. What is the problem?
– ecg8
Nov 20 '18 at 1:35
I update the question and put an image to explain. I am giving padding just text because text is look downside. But my padding doesnt't work to put it middle of the line. Also, image2 button is doesnt go to rigt corner! @ecg8
– user10378098
Nov 20 '18 at 1:40
So, your issue isn't about padding. The issue is that you want to vertically align the text in the middle of the span?
– ecg8
Nov 20 '18 at 1:43
Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. - We cannot tell you what's wrong with your CSS if we cannot see it!
– Tyler Roper
Nov 20 '18 at 1:23
Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. - We cannot tell you what's wrong with your CSS if we cannot see it!
– Tyler Roper
Nov 20 '18 at 1:23
sorry mate, I updated the question. @TylerRoper
– user10378098
Nov 20 '18 at 1:24
sorry mate, I updated the question. @TylerRoper
– user10378098
Nov 20 '18 at 1:24
You need to clarify your question. You have padding on top and bottom of your text spans and don't have it on your image spans, exactly like your CSS indicates you should. What is the problem?
– ecg8
Nov 20 '18 at 1:35
You need to clarify your question. You have padding on top and bottom of your text spans and don't have it on your image spans, exactly like your CSS indicates you should. What is the problem?
– ecg8
Nov 20 '18 at 1:35
I update the question and put an image to explain. I am giving padding just text because text is look downside. But my padding doesnt't work to put it middle of the line. Also, image2 button is doesnt go to rigt corner! @ecg8
– user10378098
Nov 20 '18 at 1:40
I update the question and put an image to explain. I am giving padding just text because text is look downside. But my padding doesnt't work to put it middle of the line. Also, image2 button is doesnt go to rigt corner! @ecg8
– user10378098
Nov 20 '18 at 1:40
So, your issue isn't about padding. The issue is that you want to vertically align the text in the middle of the span?
– ecg8
Nov 20 '18 at 1:43
So, your issue isn't about padding. The issue is that you want to vertically align the text in the middle of the span?
– ecg8
Nov 20 '18 at 1:43
add a comment |
1 Answer
1
active
oldest
votes
0
I believe you're looking for display: flex.
An element with display: flex will align its display: block children side by side. You can use align-items: center to center them vertically, and justify-content: space-between to spread them out evenly with space between.
If you want your text to be left-aligned as well, you can set it to flex-grow: 1.
dt {
display: flex;
align-items: center;
justify-content: space-between;
}
dt > span {
display: block;
}
dt > span.text { flex-grow: 1; padding-left: 10px; }<dl class="accordion">
<dt>
<span class="image"><img src="https://via.placeholder.com/100x50"></span>
<span class="text">Text Text</span>
<span class="image2"><img src="https://via.placeholder.com/100x50"></span>
</dt>
</dl>Here is a visual representation of what the above is doing:
dt {
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid red;
padding: 5px;
}
dt>span {
display: block;
border: 1px solid blue;
}
dt>span.text {
flex-grow: 1;
padding-left: 10px;
}<dl class="accordion">
<dt>
<span class="image"><img src="https://via.placeholder.com/100x50"></span>
<span class="text">This div's width will grow to fill the space because of "flex-grow: 1"</span>
<span class="image2"><img src="https://via.placeholder.com/100x50"></span>
</dt>
</dl>answered Nov 20 '18 at 1:43
Tyler RoperTyler Roper
13.6k31941
it s close perfect but. But text is need to next to the first pic. not middle of two image.
– user10378098
Nov 20 '18 at 1:44
@Potti Updated!
– Tyler Roper
Nov 20 '18 at 1:45
1
@Potti Not a problem. For completeness, I've also added a visual representation. It helps to see an example with borders sometimes to see what's actually going on.
– Tyler Roper
Nov 20 '18 at 1:49
1
@Potti If you look at the CSS, you'll see that I've only applied the styles todt, and todt > ...(immediate children ofdt). Therefore none of the CSS will apply toddordd > ...elements. If you need to apply it toddtoo, then try this: jsfiddle.net/r0jn8mve/3
– Tyler Roper
Nov 20 '18 at 2:28
1
Oh, i get the little touch now. thank you so much.
– user10378098
Nov 20 '18 at 2:31
|
show 3 more comments
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',
autoActivateHeartbeat: false,
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53384913%2fgiving-different-padding-inline-spans%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
0
I believe you're looking for display: flex.
An element with display: flex will align its display: block children side by side. You can use align-items: center to center them vertically, and justify-content: space-between to spread them out evenly with space between.
If you want your text to be left-aligned as well, you can set it to flex-grow: 1.
dt {
display: flex;
align-items: center;
justify-content: space-between;
}
dt > span {
display: block;
}
dt > span.text { flex-grow: 1; padding-left: 10px; }<dl class="accordion">
<dt>
<span class="image"><img src="https://via.placeholder.com/100x50"></span>
<span class="text">Text Text</span>
<span class="image2"><img src="https://via.placeholder.com/100x50"></span>
</dt>
</dl>Here is a visual representation of what the above is doing:
dt {
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid red;
padding: 5px;
}
dt>span {
display: block;
border: 1px solid blue;
}
dt>span.text {
flex-grow: 1;
padding-left: 10px;
}<dl class="accordion">
<dt>
<span class="image"><img src="https://via.placeholder.com/100x50"></span>
<span class="text">This div's width will grow to fill the space because of "flex-grow: 1"</span>
<span class="image2"><img src="https://via.placeholder.com/100x50"></span>
</dt>
</dl>answered Nov 20 '18 at 1:43
Tyler RoperTyler Roper
13.6k31941
it s close perfect but. But text is need to next to the first pic. not middle of two image.
– user10378098
Nov 20 '18 at 1:44
@Potti Updated!
– Tyler Roper
Nov 20 '18 at 1:45
1
@Potti Not a problem. For completeness, I've also added a visual representation. It helps to see an example with borders sometimes to see what's actually going on.
– Tyler Roper
Nov 20 '18 at 1:49
1
@Potti If you look at the CSS, you'll see that I've only applied the styles todt, and todt > ...(immediate children ofdt). Therefore none of the CSS will apply toddordd > ...elements. If you need to apply it toddtoo, then try this: jsfiddle.net/r0jn8mve/3
– Tyler Roper
Nov 20 '18 at 2:28
1
Oh, i get the little touch now. thank you so much.
– user10378098
Nov 20 '18 at 2:31
|
show 3 more comments
0
I believe you're looking for display: flex.
An element with display: flex will align its display: block children side by side. You can use align-items: center to center them vertically, and justify-content: space-between to spread them out evenly with space between.
If you want your text to be left-aligned as well, you can set it to flex-grow: 1.
dt {
display: flex;
align-items: center;
justify-content: space-between;
}
dt > span {
display: block;
}
dt > span.text { flex-grow: 1; padding-left: 10px; }<dl class="accordion">
<dt>
<span class="image"><img src="https://via.placeholder.com/100x50"></span>
<span class="text">Text Text</span>
<span class="image2"><img src="https://via.placeholder.com/100x50"></span>
</dt>
</dl>Here is a visual representation of what the above is doing:
dt {
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid red;
padding: 5px;
}
dt>span {
display: block;
border: 1px solid blue;
}
dt>span.text {
flex-grow: 1;
padding-left: 10px;
}<dl class="accordion">
<dt>
<span class="image"><img src="https://via.placeholder.com/100x50"></span>
<span class="text">This div's width will grow to fill the space because of "flex-grow: 1"</span>
<span class="image2"><img src="https://via.placeholder.com/100x50"></span>
</dt>
</dl>answered Nov 20 '18 at 1:43
Tyler RoperTyler Roper
13.6k31941
it s close perfect but. But text is need to next to the first pic. not middle of two image.
– user10378098
Nov 20 '18 at 1:44
@Potti Updated!
– Tyler Roper
Nov 20 '18 at 1:45
1
@Potti Not a problem. For completeness, I've also added a visual representation. It helps to see an example with borders sometimes to see what's actually going on.
– Tyler Roper
Nov 20 '18 at 1:49
1
@Potti If you look at the CSS, you'll see that I've only applied the styles todt, and todt > ...(immediate children ofdt). Therefore none of the CSS will apply toddordd > ...elements. If you need to apply it toddtoo, then try this: jsfiddle.net/r0jn8mve/3
– Tyler Roper
Nov 20 '18 at 2:28
1
Oh, i get the little touch now. thank you so much.
– user10378098
Nov 20 '18 at 2:31
|
show 3 more comments
0
0
0
I believe you're looking for display: flex.
An element with display: flex will align its display: block children side by side. You can use align-items: center to center them vertically, and justify-content: space-between to spread them out evenly with space between.
If you want your text to be left-aligned as well, you can set it to flex-grow: 1.
dt {
display: flex;
align-items: center;
justify-content: space-between;
}
dt > span {
display: block;
}
dt > span.text { flex-grow: 1; padding-left: 10px; }<dl class="accordion">
<dt>
<span class="image"><img src="https://via.placeholder.com/100x50"></span>
<span class="text">Text Text</span>
<span class="image2"><img src="https://via.placeholder.com/100x50"></span>
</dt>
</dl>Here is a visual representation of what the above is doing:
dt {
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid red;
padding: 5px;
}
dt>span {
display: block;
border: 1px solid blue;
}
dt>span.text {
flex-grow: 1;
padding-left: 10px;
}<dl class="accordion">
<dt>
<span class="image"><img src="https://via.placeholder.com/100x50"></span>
<span class="text">This div's width will grow to fill the space because of "flex-grow: 1"</span>
<span class="image2"><img src="https://via.placeholder.com/100x50"></span>
</dt>
</dl>answered Nov 20 '18 at 1:43
Tyler RoperTyler Roper
13.6k31941
I believe you're looking for display: flex.
An element with display: flex will align its display: block children side by side. You can use align-items: center to center them vertically, and justify-content: space-between to spread them out evenly with space between.
If you want your text to be left-aligned as well, you can set it to flex-grow: 1.
dt {
display: flex;
align-items: center;
justify-content: space-between;
}
dt > span {
display: block;
}
dt > span.text { flex-grow: 1; padding-left: 10px; }<dl class="accordion">
<dt>
<span class="image"><img src="https://via.placeholder.com/100x50"></span>
<span class="text">Text Text</span>
<span class="image2"><img src="https://via.placeholder.com/100x50"></span>
</dt>
</dl>Here is a visual representation of what the above is doing:
dt {
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid red;
padding: 5px;
}
dt>span {
display: block;
border: 1px solid blue;
}
dt>span.text {
flex-grow: 1;
padding-left: 10px;
}<dl class="accordion">
<dt>
<span class="image"><img src="https://via.placeholder.com/100x50"></span>
<span class="text">This div's width will grow to fill the space because of "flex-grow: 1"</span>
<span class="image2"><img src="https://via.placeholder.com/100x50"></span>
</dt>
</dl>dt {
display: flex;
align-items: center;
justify-content: space-between;
}
dt > span {
display: block;
}
dt > span.text { flex-grow: 1; padding-left: 10px; }<dl class="accordion">
<dt>
<span class="image"><img src="https://via.placeholder.com/100x50"></span>
<span class="text">Text Text</span>
<span class="image2"><img src="https://via.placeholder.com/100x50"></span>
</dt>
</dl>dt {
display: flex;
align-items: center;
justify-content: space-between;
}
dt > span {
display: block;
}
dt > span.text { flex-grow: 1; padding-left: 10px; }<dl class="accordion">
<dt>
<span class="image"><img src="https://via.placeholder.com/100x50"></span>
<span class="text">Text Text</span>
<span class="image2"><img src="https://via.placeholder.com/100x50"></span>
</dt>
</dl>dt {
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid red;
padding: 5px;
}
dt>span {
display: block;
border: 1px solid blue;
}
dt>span.text {
flex-grow: 1;
padding-left: 10px;
}<dl class="accordion">
<dt>
<span class="image"><img src="https://via.placeholder.com/100x50"></span>
<span class="text">This div's width will grow to fill the space because of "flex-grow: 1"</span>
<span class="image2"><img src="https://via.placeholder.com/100x50"></span>
</dt>
</dl>dt {
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid red;
padding: 5px;
}
dt>span {
display: block;
border: 1px solid blue;
}
dt>span.text {
flex-grow: 1;
padding-left: 10px;
}<dl class="accordion">
<dt>
<span class="image"><img src="https://via.placeholder.com/100x50"></span>
<span class="text">This div's width will grow to fill the space because of "flex-grow: 1"</span>
<span class="image2"><img src="https://via.placeholder.com/100x50"></span>
</dt>
</dl>answered Nov 20 '18 at 1:43
Tyler RoperTyler Roper
13.6k31941
edited Nov 20 '18 at 1:49
answered Nov 20 '18 at 1:43
Tyler RoperTyler Roper
13.6k31941
answered Nov 20 '18 at 1:43
Tyler RoperTyler Roper
13.6k31941
answered Nov 20 '18 at 1:43
Tyler RoperTyler Roper
13.6k31941
13.6k31941
it s close perfect but. But text is need to next to the first pic. not middle of two image.
– user10378098
Nov 20 '18 at 1:44
@Potti Updated!
– Tyler Roper
Nov 20 '18 at 1:45
1
@Potti Not a problem. For completeness, I've also added a visual representation. It helps to see an example with borders sometimes to see what's actually going on.
– Tyler Roper
Nov 20 '18 at 1:49
1
@Potti If you look at the CSS, you'll see that I've only applied the styles todt, and todt > ...(immediate children ofdt). Therefore none of the CSS will apply toddordd > ...elements. If you need to apply it toddtoo, then try this: jsfiddle.net/r0jn8mve/3
– Tyler Roper
Nov 20 '18 at 2:28
1
Oh, i get the little touch now. thank you so much.
– user10378098
Nov 20 '18 at 2:31
|
show 3 more comments
it s close perfect but. But text is need to next to the first pic. not middle of two image.
– user10378098
Nov 20 '18 at 1:44
@Potti Updated!
– Tyler Roper
Nov 20 '18 at 1:45
1
@Potti Not a problem. For completeness, I've also added a visual representation. It helps to see an example with borders sometimes to see what's actually going on.
– Tyler Roper
Nov 20 '18 at 1:49
1
@Potti If you look at the CSS, you'll see that I've only applied the styles todt, and todt > ...(immediate children ofdt). Therefore none of the CSS will apply toddordd > ...elements. If you need to apply it toddtoo, then try this: jsfiddle.net/r0jn8mve/3
– Tyler Roper
Nov 20 '18 at 2:28
1
Oh, i get the little touch now. thank you so much.
– user10378098
Nov 20 '18 at 2:31
it s close perfect but. But text is need to next to the first pic. not middle of two image.
– user10378098
Nov 20 '18 at 1:44
it s close perfect but. But text is need to next to the first pic. not middle of two image.
– user10378098
Nov 20 '18 at 1:44
@Potti Updated!
– Tyler Roper
Nov 20 '18 at 1:45
@Potti Updated!
– Tyler Roper
Nov 20 '18 at 1:45
1
1
@Potti Not a problem. For completeness, I've also added a visual representation. It helps to see an example with borders sometimes to see what's actually going on.
– Tyler Roper
Nov 20 '18 at 1:49
@Potti Not a problem. For completeness, I've also added a visual representation. It helps to see an example with borders sometimes to see what's actually going on.
– Tyler Roper
Nov 20 '18 at 1:49
1
1
@Potti If you look at the CSS, you'll see that I've only applied the styles to
dt, and to dt > ... (immediate children of dt). Therefore none of the CSS will apply to dd or dd > ... elements. If you need to apply it to dd too, then try this: jsfiddle.net/r0jn8mve/3– Tyler Roper
Nov 20 '18 at 2:28
@Potti If you look at the CSS, you'll see that I've only applied the styles to
dt, and to dt > ... (immediate children of dt). Therefore none of the CSS will apply to dd or dd > ... elements. If you need to apply it to dd too, then try this: jsfiddle.net/r0jn8mve/3– Tyler Roper
Nov 20 '18 at 2:28
1
1
Oh, i get the little touch now. thank you so much.
– user10378098
Nov 20 '18 at 2:31
Oh, i get the little touch now. thank you so much.
– user10378098
Nov 20 '18 at 2:31
|
show 3 more comments
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53384913%2fgiving-different-padding-inline-spans%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. - We cannot tell you what's wrong with your CSS if we cannot see it!
– Tyler Roper
Nov 20 '18 at 1:23
sorry mate, I updated the question. @TylerRoper
– user10378098
Nov 20 '18 at 1:24
You need to clarify your question. You have padding on top and bottom of your text spans and don't have it on your image spans, exactly like your CSS indicates you should. What is the problem?
– ecg8
Nov 20 '18 at 1:35
I update the question and put an image to explain. I am giving padding just text because text is look downside. But my padding doesnt't work to put it middle of the line. Also, image2 button is doesnt go to rigt corner! @ecg8
– user10378098
Nov 20 '18 at 1:40
So, your issue isn't about padding. The issue is that you want to vertically align the text in the middle of the span?
– ecg8
Nov 20 '18 at 1:43