私のテキストの背景を大きくするには？

Question

テキストを表示していますが、すべてのテキストが表示されていないので、すべてのテキストが表示されるように背景を大きくしたいと考えています。今、 "G" の下の部分がクリッピング領域外である：

私のHTMLは

<h2><strong>{% trans %}Why Bnano is{% endtrans %}</strong><span>{% trans %}RIGHT FOR YOU{% endtrans %}</span></h2> 

ですそして、私のCSSは

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, hr, button {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align: baseline; background:none;} 
table, tbody, tfoot, thead, tr, th, td {padding:4px;vertical-align:top;} 
ol, ul {list-style:none;} 
h1, h2, h3, h4, h5, h6, li {line-height:100%;} 
blockquote, q {quotes:none;} 
q:before, 
q:after {content: '';} 
table {border-collapse:collapse; border-spacing:0;} 
input, textarea, select{ 
    font:11px Arial, Helvetica, sans-serif; 
    vertical-align:middle; 
    margin:0; 
    padding:0; 
} 
form, fieldset{border-style:none;} 
html {height:100%;} 
body { 
    min-width:1004px; 
    color:#404344; 
    height:100%; 
    font:13px/16px "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
    background:#fff; 
    margin: 0 1px 1px; 
} 
img{border-style:none;} 
a{ 
    text-decoration:none; 
    color:#000000; 
} 
a:focus {outline:none;} 
a:hover{text-decoration:underline;} 
/* wrapper */ 
#wrapper{ 
    width:100%; 
    min-height:100%; 
} 
* html #wrapper {height:100%;} 
/* header */ 
#header { 
    width:100%; 
    background:#1596c3 url(/welcome/static/images/bg-header.png) repeat-x; 
} 
#header:after { 
    display:block; 
    clear:both; 
    content:""; 
} 
/* header-area */ 
.header-area { 
    margin:0 auto; 
    width:948px; 
    padding:0 23px; 
} 
/* top-panel*/ 
.top-panel { 
    overflow:hidden; 
    height:36px; 
    padding:6px 0 0 4px; 
    margin:0 0 19px; 
    position:relative; 
    z-index:9999999 !important; 
} 
/* search-form */ 
.search-form { 
    float:right; 
    margin:0 10px 0 15px; 
} 
.search-form form {float:left;} 
.top-panel .text { 
    float:left; 
    padding:6px 13px 7px 13px; 
    margin:0 5px 0 0; 
    background:url(http://bnano-www.appspot.com/welcome/static/images/bg-text.gif) no-repeat; 
} 
.top-panel .text input { 
    font:13px "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
    color:#8cc0d3; 
    float:left; 
    width:157px; 
    margin:0; 
    padding:0 -2px 0 0; 
    border:0; 
    background:none; 
} 
.top-panel .text input:focus {outline:none;} 
.search-form .search { 
    float:left; 
    background:url(http://bnano-www.appspot.com/welcome/static/images/btn-search.gif) no-repeat; 
    width:26px; 
    height:27px; 
    overflow:hidden; 
    text-indent:-9999px; 
    line-height:0; 
    font-size:0; 
    cursor:pointer; 
    border:0; 
} 
/* email-form */ 
.email-form { 
    float:left; 
    width:214px; 
} 
.email-form form {float:left;} 
.email-form .go { 
    float:left; 
    background:url(http://bnano-www.appspot.com/welcome/static/images/btn-go.gif) no-repeat; 
    width:26px; 
    height:27px; 
    overflow:hidden; 
    text-indent:-9999px; 
    line-height:0; 
    font-size:0; 
    cursor:pointer; 
    border:0; 
} 
/* links */ 
.top-panel .links { 
    float:right; 
    padding:9px 0 0; 
    width:410px; 
} 
.top-panel .links .title { 
    float:left; 
    color:#fdfdfd; 
    font-weight:normal; 
    font-size:13px; 
    text-transform:uppercase; 
    padding-top:1px; 
} 
.top-panel .links .title .cufon { 
    float:left; 
    margin:0 !important; 
} 
.top-panel .links ul { 
    float:left; 
    position:relative; 
    margin:-5px 0 0; 
} 
.top-panel .links li { 
    float:left; 
    padding:0 0 0 9px; 
} 
.top-panel .links li img {display:block;} 
/* header-info */ 
.header-info { 
    padding:0 0 95px 17px; 
    position:relative; 
    z-index:99999 !important; 
} 
/* logo */ 
.logo { 
    float:left; 
    background:url(/welcome/static/images/logo-opaque1.png) no-repeat; 
    width:290px; 
    height:176px; 
    text-indent:-9999px; 
    margin:0 0 0 -15px; 
    position:relative; 
    z-index: 999999 !important; 
} 
.logo a { 
    display:block; 
    height:100%; 
} 
/* nav */ 
#nav { 
    float:right; 
    padding:20px 0 0; 
} 
#nav li { 
    float:left; 
    margin:0 3px 0 3px; 
    font-size:16px; 
    line-height:17px; 
} 
#nav li a { 
    float:left; 
    padding:0 5px 0 0; 
    color:#a9cfdd; 
    cursor:pointer; 
} 
#nav li a span { 
    float:left; 
    padding:5px 6px 4px 11px; 
} 
#nav li.active a, 
#nav li a:hover { 
    text-decoration:none; 
    color:#f6f6f6; 
    background:url(http://bnano-www.appspot.com/welcome/static/images/btn-active.gif) no-repeat 100% -23px; 
} 
#nav li.active a span, 
#nav li a:hover span { 
    background:url(http://bnano-www.appspot.com/welcome/static/images/btn-active.gif) no-repeat; 
} 
#nav li a .cufon { 
    float:left; 
    margin:0 !important; 
} 
/* info-area */ 
#header .info-area { 
    height:398px; 
    width:900px; 
    background:none !important; 
    padding:15px 2px 0 13px; 
    margin-top:-148px; 
    margin-left:25px; 
} 

#header .info-area .txt { 
    float:left; 
    color:#f6f8f9; 
    font-size:19px; 
    margin-top:100px; 
} 
#header .info-area .txt .cufon { 
    float:left; 
    margin:0 !important; 
} 
#header .info-area .txt .text .cufon {margin-top:1px !important;} 
#header .info-area .title { 
    color:#a9cfdd; 
    font-size:48px; 
    position:absolute; 
    line-height:51px; 
    padding-top:55px; 
    width:550px; 
} 
#header .info-area .title span { 
    font-size:35px; 
    line-height:36px; 
    display:block; 
    overflow:hidden; 
    width:100%; 
    height:32px !important; 
    padding-top:1px; 
} 
#header .info-area .title em { 
    font-style:normal; 
    display:block; 
    overflow:hidden; 
    width:100%; 
    height:53px !important; 
} 
#header .info-area .desc { 
    font-family: "Arial Narrow", sans-serif; 
    line-height:20px; 
    margin: 8px 0 25px 3px; 
    font-size:19px; 
    letter-spacing:2px; 
    position:absolute; 
    z-index:9999 !important; 
    padding-top:130px; 
    width:550px; 
} 
#header .info-area .txt .text { 
    display:block; 
    overflow:hidden; 
    height:1%; 
    padding:0 0 5px; 
} 
#header .info-area .txt .text1 { 
    background:url(http://bnano-www.appspot.com/welcome/static/images/ico03.gif) no-repeat 2px 9px; 
    padding:26px 0 27px 114px; 
} 
#header .info-area .img { 
    float:right; 
    position:relative; 
    margin-left:500px; 
    margin-top:-100px; 
} 
#header .info-area .more { 
    overflow:hidden; 
    height:25px; 
    letter-spacing:1px !important; 
    margin-top:23px; 
    margin-left:-3px; 
} 
#header .info-area .more a { 
    color:#f6f8f9; 
    float:left; 
    background:url(http://bnano-www.appspot.com/welcome/static/images/bullet05.gif) no-repeat 5px 3px; 
    padding:0 0 0 19px; 
    font-size:18px; 
} 
#header .info-area .more a span { 
    float:left; 
    margin-left:-2px; 
    padding-bottom:0; 
} 
#header .info-area .more a:hover {text-decoration:none;} 
#header .info-area .more a:hover span { 
    border-bottom:1px solid #f6f8f9; 
    padding:0; 
} 
/* main */ 
#main { 
    overflow:hidden; 
    width:100%; 
    padding:58px 0 122px; 
    background:url(http://bnano-www.appspot.com/welcome/static/images/bg-main-area.gif) repeat-x; 
} 
/* onecolumn */ 
#onecolumn { 
    margin:0 auto; 
    overflow:hidden; 
    width:1004px; 
    position:relative; 
} 
#onecolumn ul { 
    margin:10px 0 10px 25px; 
} 
#onecolumn li { 
    overflow:hidden; 
    height:1%; 
    vertical-align:top; 
    padding:0 0 12px 15px; 
    line-height:16px; 
    background:url(http://bnano-www.appspot.com/welcome/static/images/bullet03.gif) no-repeat 2px 6px; 
} 
#onecolumn h2 { 
    color:#062f3d; 
    font-size:25px; 
    line-height:26px; 
    font-weight:normal; 
    margin:0 0 8px 0; 

} 
#onecolumn h2 strong { 
    color:#138db7; 
    font-weight:bold; 
    display:block; 
    overflow:hidden; 
    width:100%; 
} 
#onecolumn h2 span { 
    display:block; 
    overflow:hidden; 
    width:100%; 
    position:relative; 
    padding-bottom:15px; 
} 
#onecolumn h2 .cufon { 
    float:left; 
    margin:0 !important; 
} 
#onecolumn h3 { 
    color:#676a6b; 
    font-size:25px; 
    line-height:26px; 
    font-weight:normal; 
    margin:0 0 10px; 
} 
#onecolumn h3 strong { 
    color:#138db7; 
    font-weight:bold; 
    display:block; 
    overflow:hidden; 
    width:100%; 
} 
#onecolumn h3 span { 
    display:block; 
    overflow:hidden; 
    width:100%; 
    position:relative; 
    margin:-3px 0 0; 
} 
#onecolumn h3 .cufon { 
    float:left; 
    margin:0 !important; 
} 
#onecolumn .content { 
    padding:0 48px 10px 48px; 
} 
#onecolumn content p {margin:0 0 16px;} 
/* twocolumns */ 
#twocolumns { 
    margin:0 auto; 
    overflow:hidden; 
    width:1004px; 
    position:relative; 
} 
#twocolumns h2 { 
    color:#062f3d; 
    font-size:25px; 
    line-height:26px; 
    font-weight:normal; 
    margin:0 0 14px 0; 
} 
#twocolumns h2 strong { 
    color:#138db7; 
    font-weight:bold; 
    display:block; 
    overflow:hidden; 
    width:100%; 
} 
#twocolumns h2 span { 
    display:block; 
    overflow:hidden; 
    width:100%; 
    position:relative; 
    margin:-3px 0 0; 
    font-size:30px; 
} 
#twocolumns h2 .cufon { 
    float:left; 
    margin:0 !important; 
} 
#twocolumns h3 { 
    color:#062f3d; 
    font-size:25px; 
    line-height:26px; 
    font-weight:normal; 
    margin:0 0 10px; 
} 
#twocolumns h3 strong { 
    color:#138db7; 
    font-weight:bold; 
    display:block; 
    overflow:hidden; 
    width:100%; 
} 
#twocolumns h3 span { 
    display:block; 
    overflow:hidden; 
    width:100%; 
    position:relative; 
    margin:-3px 0 0; 
    font-size:26px; 
} 
#twocolumns h3 .cufon { 
    float:left; 
    margin:0 !important; 
} 
#twocolumns h4 strong { 
    color:#138db7; 
    font-weight:bold; 
    display:block; 
    overflow:hidden; 
    width:100%; 
    font-size:16px; 
    margin: 10px 0 17px 2px; 
} 
/* content */ 
#content { 
    position:relative; 
    float:left; 
    width:596px; 
    padding:0 20px 10px 48px; 
    z-index: 99999 !important; 
} 
#content p { 
    margin:0 2px 16px; 
    line-height:18px; 
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; 
    font-size:13px; 
} 
#content p img { 
    padding:10px; 
} 
#content .more { 
    overflow:hidden; 
    height:1%; 
    padding:0 0 16px 4px; 
    font-size:14px; 
} 
#content .more a { 
    float:left; 
    background:url(http://bnano-www.appspot.com/welcome/static/images/bullet01.gif) no-repeat 0 55%; 
    padding:0 0 0 13px; 
    color:#404344; 
} 
#content .more a:hover { 
    color:#138db7; 
} 
/* video-block */ 
#content .video-block { 
    width:616px; 
    margin:0 -20px 0 -19px; 
    position:relative; 
    padding:0 4px 0 15px; 
    background:#d4dadb url(http://bnano-www.appspot.com/welcome/static/images/bg-video-block.gif) repeat-x; 
} 
#content .video-block:after { 
    display:block; 
    clear:both; 
    content:""; 
} 
#content .video-block .heading { 
    background:url(http://bnano-www.appspot.com/welcome/static/images/bg-heading.gif) no-repeat; 
    width:176px; 
    height:51px; 
    position:relative; 
    margin:0 0 4px -7px; 
    padding:25px 0 0 15px; 
} 
#content .video-block .info-col { 
    float:left; 
    width:271px; 
    padding:0 0 0 7px; 
    margin:-6px 0 0; 
    position:relative; 
} 
#content .video-block h3 { 
    overflow:hidden; 
    width:100%; 
    padding:3px 0 0; 
    margin:0; 
} 
#twocolumns .video-block strong { 
    width:auto; 
    float:left; 
    display:inline; 
    font-size:18px; 
    color:#fff; 
} 
#twocolumns .video-block span{ 
    width:auto; 
    float:left; 
    display:inline; 
    font-size:25px; 
    color:#fff; 
} 
/* list */ 
#content .video-block .list {height:1%;} 
#content .video-block .list li { 
    overflow:hidden; 
    height:1%; 
    vertical-align:top; 
    padding:0 0 13px 13px; 
    line-height:14px; 
    background:url(http://bnano-www.appspot.com/welcome/static/images/bullet02.gif) no-repeat 1px 4px; 
} 
#content .video-block .list li h4 { 
    font-size:13px; 
    line-height:15px; 
    font-weight:normal; 
    color:#967723; 
} 
#content .video-block .list li h4 a {color:#967723;} 
#content .video-block .list li p {margin:0;} 
#content .video-block .video { 
    float:right; 
    margin:0 0 -8px; 
    padding:30px 0 0; 
    position:relative; 
} 
#content .video-block .video img {display:block;} 
#content blockquote { 
    font: 14px/22px normal helvetica, sans-serif; 
    margin-top: 10px; 
    margin-bottom: 10px; 
    margin-left: 50px; 
    padding-left: 15px; 
    border-left: 3px solid #ccc; 
} 
#content blockquote p {margin:0;} 
#content blockquote cite {font-style:normal;} 
/* blocks */ 
#content .blocks { 
    overflow:hidden; 
    width:582px; 
} 
#content .blocks h3 { 
    font-size:14px; 
    line-height:18px; 
    font-weight:normal; 
    color:#4499b7; 
    margin:0 0 13px; 
} 
#content .block-holder { 
    width:590px; 
    overflow:hidden; 
    margin:0 -8px 5px 0; 
} 
#content .blocks .block { 
    width:290px; 
    margin:0 4px 0 0; 
    padding:18px 0 10px; 
    float:left; 
    color:#ba9d50; 
    font-size:11px; 
    line-height:13px; 
    background:#dcddde; 
} 
#content .blocks .block .img { 
    overflow:hidden; 
    width:100%; 
    text-align:center; 
    margin:0 0 18px; 
} 
#content .blocks .block .img img {vertical-align:top;} 
#content .blocks .block p { 
    text-align:center; 
    margin:0; 
} 
#content .blocks .block p a {color:#ba9d50;} 
#content ul { 
    margin:10px 0 10px 25px; 
} 
#content li { 
    overflow:hidden; 
    height:1%; 
    vertical-align:top; 
    padding:0 0 12px 15px; 
    line-height:16px; 
    background:url(http://bnano-www.appspot.com/welcome/static/images/bullet03.gif) no-repeat 2px 6px; 
} 
/* sidebar */ 
#sidebar { 
    float:right; 
    position:relative; 
    width:315px; 
    padding:0 3px 0 10px; 
    overflow:hidden; 
    z-index: 99999 !important; 
} 
#sidebar p { 
    margin-left:2px; 
} 
/* news-list */ 
#sidebar .news-list { 
    width:300px; 
    padding:0 15px 19px 0; 
} 
#sidebar .news-list li { 
    overflow:hidden; 
    height:1%; 
    vertical-align:top; 
    padding:0 0 12px 15px; 
    line-height:14px; 
    background:url(http://bnano-www.appspot.com/welcome/static/images/bullet03.gif) no-repeat 2px 6px; 
} 
#sidebar .news-list li h4 { 
    font-size:13px; 
    line-height:15px; 
    font-weight:normal; 
    margin:0 0 1px; 
} 
/* news-list1 */ 
#sidebar .news-list1 { 
    padding-right:0; 
    padding-bottom:14px; 
    width:300px; 
} 
#sidebar .news-list1 li { 
    background-position:3px 6px; 
    padding-left:17px; 
} 
#sidebar .news-list1 h4 { 
    color:#967723; 
    position:relative; 
    word-spacing:-1px; 
} 
#sidebar .news-list1 h4 a {color:#967723;} 
/* #sidebar .news-list1 h4 a {color:#967723;} */ 
/* info-list */ 
#sidebar .info-list { 
    width:269px; 
    padding:1px 0 0; 
} 
#sidebar .info-list li { 
    overflow:hidden; 
    height:1%; 
    font-size:25px; 
    line-height:27px; 
    margin:0 0 2px; 
    vertical-align:top; 
    background:url(http://bnano-www.appspot.com/welcome/static/images/bg-info-list.gif) no-repeat; 
} 
#sidebar .info-list li a { 
    float:left; 
    padding:9px 10px 4px 41px; 
    color:#138db7; 
    background:url(http://bnano-www.appspot.com/welcome/static/images/bullet04.gif) no-repeat 13px 50%; 
} 
#sidebar .info-list li a .cufon { 
    float:left; 
    margin:0 !important; 
} 
#sidebar .info-list li a:hover {text-decoration:none;} 
#sidebar .info-list li a span { 
    float:left; 
    margin:0 2px 0 0; 
} 
#sidebar .info-list li a strong {float:left;} 
#sidebar .view { 
    display:block; 
    background:url(http://bnano-www.appspot.com/assets/files/img/btn/online-store.png) no-repeat; 
    color:#fff; 
    font-size:30px; 
    width:191px; 
    height:75px; 
    margin:0 0 0 -8px; 
    padding:22px 115px 0 18px; 
} 
#sidebar .view span { 
    font-size:30px; 
    overflow:hidden; 
    width:100%; 
    display:block; 
} 
#sidebar .view strong { 
    overflow:hidden; 
    width:100%; 
    display:block; 
} 
#sidebar .view .cufon { 
    float:left; 
    margin:0 !important; 
} 
#sidebar .view:hover {text-decoration:none;} 
/* footer */ 
#footer { 
    height:206px; 
    position:relative; 
    overflow:hidden; 
    margin:-106px 0 0; 
    font-size:11px; 
    line-height:14px; 
    color:#9ddbf1; 
    background:#1494c1 url(http://bnano-www.appspot.com/welcome/static/images/bg-footer.gif) repeat-x; 
} 
/* footer-area */ 
.footer-area { 
    margin:0 auto; 
    width:948px; 
    padding:52px 1px 0; 
} 
.footer-area p a {color:#000000;} 
#footer .copyright { 
    float:left; 
    width:390px; 
    margin:5px 30px 0 0; 
} 
#footer .copyright p {text-align:right;} 
#footer .logo1 { 
    float:left; 
    background:url(http://bnano-www.appspot.com/welcome/static/images/logo01.png) no-repeat; 
    width:130px; 
    height:102px; 
    overflow:hidden; 
    text-indent:-9999px; 
    position:relative; 
    margin:-52px 30px 0 0; 
} 
#footer .logo1 a { 
    display:block; 
    height:100%; 
} 
/* info */ 
#footer .info { 
    float:left; 
    width:350px; 
    position:relative; 
    margin:-9px 0 0; 
} 
#sidebar form { 
width : 295px; 
height : auto; 
text-align : left; 
margin-top : 10px; 
margin-bottom:25px; 
border: none; 
} 

#sidebar input { 
width : 240px; 
height:20px; 
background : url(http://bnano-www.appspot.com/welcome/static/images/bg-input.png) no-repeat scroll 0% 0%; 
color : #666; 
font-size : 14px; 
margin-bottom : 6px; 
padding : 10px 10px 8px 10px; 
border:0; 
} 

#sidebar textarea { 
width : 265px; 
height : 105px; 
background : url(http://bnano-www.appspot.com/welcome/static/images/textarea-b.png) no-repeat scroll 0% 0%; 
padding : 10px 30px 10px 10px; 
font-size : 14px; 
color : #666; 
margin-bottom : 1px; 
border:0; 
} 

#sidebar .button { 
background : url(http://bnano-www.appspot.com/welcome/static/images/button.png) no-repeat 0% 0%; 
width : 104px; 
height : 30px; 
color : #fff; 
font-size : 13px; 
cursor:pointer; 
margin-top:10px; 
margin-left:180px; 
padding : 5px 0 5px 0; 
border:0; 
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; 
} 

#sidebar .invalidValue { 
color:#c21313; 
} 

あなたは私を伝えることができていますどのように描画領域を増やすのですか？

おかげ

Answer 1

はあなたの<h2>のline-heightを増やしてみてください！

Answer 2

<h2>にパディングを追加/増やすことができます。

Answer 3

投稿されたコードを使用して問題を確認することはできません。代わりに、サーバー側のコードの短いフラグメントのは、おそらく、おそらくid=onecolumnを持つ要素の内部

<h2><strong>Varför Bnano är</strong><span>rätt för dig</span></h2> 

のようなもので、実際のHTMLコードを、投稿する必要があります。しかし、他に何がありますか？この設定でも、レンダリングが異なります。

いずれの場合でも、問題は要素に不適切なline-height値を設定することによって発生している可能性があります。 Lucida Sans UnicodeやLucida Grandeのようなフォントの場合、値は1.3程度かそれ以上でなければなりません。CSS規則の1つが値を100％に設定します。これは親要素のフォントサイズを意味し、 h2

Answer 4

Jannis Mは、あなたが持っているので、テキストが切断された...それは多分あなたは私たちに、HTMLの多くを表示することができます...かなり汚れているので、それを理解し、支援することが容易になり、

Answer 5

を言ったように親コンテナのサイズを設定し、overflow：hiddenを設定します。 domを調べ、親の要素の高さを確認します。あなたは完全なhtmlを与えていないので、私はどこに正確な問題があるのか​​を伝えることができます。

スタートで：

onecolumn