[解決済み] マージン/パディングが機能しない
2022-02-09 14:51:37
質問
メインdivの中に2つのメインdivがあります。試しにmarginとpaddingを大きな数値で追加してみましたが、うまくいきません。なぜ、間にmarginやpaddingを入れることができないのでしょうか?助けてください。
HTML
<div id="mainWrapper">
<header class="container">
<div id="nav2" class="container">
<ul class="nav2a">
<li><a href="#">Login</a></li>
<li><a href="#">Quick Search</a></li>
<li><a href="#">Advanced Search</a></li>
<li><a href="#">English <i class="fa fa-caret-down"></i></p></a>
<ul class="nav2b">
<li><a href="#">French</a></li>
<li><a href="#">Italian</a></li>
<li><a href="#">Spanish</a></li>
<li><a href="#">German</a></li>
</ul>
</li>
</ul>
</div> <!-- end nav2 -->
</header>
<div class="clearfloat"></div>
<div id="fullNav" class="container">
<div id="logoSymbol">
<a href="#">
<img src="images/gpj-baker-symbol.png" width="54" height="51" />
</a>
</div>
<div id="logoText">
<a href="#">
<img src="images/gpj-baker-text.png" width="200" height="30" />
</a>
</div>
<div class="clearfloat"></div>
<div id="mainNav">
<ul class="nav1a">
<li><a href="#">Brands</a></li>
<li><a href="#">Fabrics & Wallcoverings</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Where To Buy</a></li>
<li><a href="#">Press</a></li>
</ul>
</div>
<div class="clearfloat"></div>
<div class="hr"><hr/></div>
<div class="clearfloat"></div>
</div> <!-- end fullNav -->
<div class="clearfloat"></div>
<div id="brandContainer" class="container">
<div id="breadcrumbs" class="container">
<ul class="breadInfo">
<li><a href="#">Home</a></li>
<li><a href="brands.html" class="currentPg">Brands</a></li>
</ul>
</div> <!-- end breadIcrumbs -->
<div class="clearfloat"></div>
<div class="brandList">
<div class="brandImg">
<a href="#"><img src="http://placehold.it/442x294" /></a>
</div>
<div class="brandCopy">
<a href="#">
<img src="images/gpj-baker-text.png" width="162" height="25" />
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dui ex, pharetra a commodo maximus, luctus id ligula. Curabitur tempus arcu ac orci fringilla varius.</p>
<p>Cras hendrerit, mi interdum varius luctus, nisl lectus accumsan mauris, eu tristique arcu massa et arcu. Vivamus venenatis purus blandit, placerat urna eget, faucibus mauris.</p>
<a href="#">Explore <i class="fa fa-caret-right"></i></a>
</div>
</div> <!-- end brandList -->
<div class="clearfloat"></div>
<div class="brandList">
<div class="brandImg">
<a href="#"><img src="http://placehold.it/442x294" /></a>
</div>
<div class="brandCopy">
<a href="#">
<img src="images/gpj-baker-text.png" width="162" height="25" />
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dui ex, pharetra a commodo maximus, luctus id ligula. Curabitur tempus arcu ac orci fringilla varius.</p>
<p>Cras hendrerit, mi interdum varius luctus, nisl lectus accumsan mauris, eu tristique arcu massa et arcu. Vivamus venenatis purus blandit, placerat urna eget, faucibus mauris.</p>
<a href="#">Explore <i class="fa fa-caret-right"></i></a>
</div>
</div> <!-- end brandList -->
</div><!-- end brandContainer -->
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, 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, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit;
vertical-align: baseline;} /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;} body {line-height: 1;} ol, ul {list-style: none;} blockquote, q {quotes: none;} blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;} table {border-collapse: collapse; border-spacing: 0;}
body {
font-size: 16px;
text-decoration: none;
}
h1, h2, h3, h4, h5, h6, p, a {
font-family: "Lato", Helvetica, Arial, sans-serif;
}
.clearfloat {
clear: both;
}
#mainWrapper {
margin: 0 auto;
max-width: 1280px;
vertical-align: middle;
width: 100%;
}
.container {
margin: 0 auto;
max-width: 980px;
vertical-align: middle;
width: 100%;
}
header .container {
display: block;
float: right;
}
header #nav {
float: right;
}
div.hr {
border: 0.01em solid #676767;
}
#nav2 {
float: right;
font-size: 12px;
font-weight: 400;
margin: 0 auto;
padding: 5px 0;
text-transform: uppercase;
}
#nav2 a:link,
#nav2 a:visited {
color: #676767;
}
#nav2 a:hover {
color: #4284b8;
}
#nav2 li {
vertical-align: middle;
float:left;
}
#nav2 li,
#nav2 li a {
display: inline-block;
text-decoration: none;
}
#nav2 li a {
padding: 5px 10px;
}
#nav2 li ul {
display: none;
position: absolute;
}
#nav2 li:hover ul {
display: block;
}
#nav2 li ul li {
clear: both;
}
#nav2 .nav2a {
float: right;
}
#fullNav {
text-align: center;
}
#fullNav #logoSymbol,
#fullNav #logoText {
display: inline;
margin: 0 auto;
padding: 0 5px;
}
#mainNav {
font-size: 12px;
font-weight: 400;
margin: 0 auto;
padding: 5px 0;
text-transform: uppercase;
}
#mainNav a:link,
#mainNav a:visited {
color: #676767;
}
#mainNav a:hover {
color: #4284b8;
}
#mainNav li {
vertical-align: middle;
}
#mainNav li,
#mainNav li a {
display: inline-block;
text-decoration: none;
}
#mainNav li a {
padding: 5px 25px;
}
#mainNav li ul {
display: none;
position: absolute;
}
#mainNav li:hover ul {
display: block;
}
#mainNav li ul li {
clear: both;
}
#footerNav {
float: right;
font-size: 12px;
font-weight: 400;
margin: 0 auto;
padding: 5px 0;
text-transform: uppercase;
}
#footerNav a:link,
#footerNav a:visited {
color: #676767;
}
#footerNav a:hover {
color: #6e8878;
}
#footerNav li {
vertical-align: middle;
float:left;
}
#footerNav li,
#footerNav li a {
display: inline-block;
text-decoration: none;
}
#footerNav li a {
padding: 5px 10px;
}
#footerNav li ul {
display: none;
position: absolute;
}
#footerNav li:hover ul {
display: block;
}
#nav3b {
display: none;
clear: both;
}
#nav3b a:hover {
display: block;
}
#footerNav .nav3a {
float: right;
}
#breadcrumbs {
float: right;
font-size: 9px;
font-weight: 400;
margin: 0 auto;
text-transform: uppercase;
}
#breadcrumbs .currentPg {
color: #676767;
font-weight:bold;
}
#breadcrumbs a:link,
#breadcrumbs a:visited {
color: #8b8b8b;
}
#breadcrumbs a:hover {
color: #4284b8;
}
#breadcrumbs li {
vertical-align: middle;
float:left;
}
#breadcrumbs li {
padding: 0 .25em 0 0;
}
#breadcrumbs li:after {
content: " | ";
display: inline-block;
font-size: 100%;
margin: 0 0 0 1.25em;
}
#breadcrumbs li:last-child:after {
content: " ";
}
#breadcrumbs li,
#breadcrumbs li a {
display: inline-block;
text-decoration: none;
}
#breadcrumbs li a {
padding: 5px 10px;
}
#breadcrumbs li a:last-child {
padding-right: 0;
}
#breadcrumbs .breadInfo {
float: right;
padding-bottom: 5px;
}
.brandList {
display: inline;
overflow: auto;
text-align: center;
vertical-align: middle;
width: 100%;
}
.brandImg {
display: block;
float: left;
margin: 0 auto;
max-width: 442px;
padding-right: 8px;
vertical-align: middle;
width: 50%;
}
.brandCopy {
display: block;
float: left;
font-size: 12px;
font-weight: 400;
margin: 0 auto;
overflow: hidden;
padding-left: 8px;
position: relative;
text-transform: uppercase;
vertical-align: middle;
width: 50%;
}
.brandCopy p {
display: block;
font-size: 16px;
text-transform: none;
line-height: 150%;
}
.brandCopy .currentPg {
color: #676767;
font-weight:bold;
}
.brandCopy a:link,
.brandCopy a:visited {
color: #4284b8;
font-weight: bold;
text-decoration: none;
}
.brandCopy a:hover {
color: #959595;
}
.brandCopy .breadInfo {
float: right;
padding-bottom: 5px;
}
.brandCopy a img {
margin: 0 auto;
margin-bottom: 16px;
max-width: 442px;
text-align: center;
}
.brandCopy p {
margin-bottom: 16px;
overflow: auto;
text-align: left;
}
EDIT: フルCSSを追加しました。
解決するには?
OK、では、マージンとパディングを追加しようとしたのは
.brandList
を持つdivは
display: inline
プロパティを使用します。これを
display: inline-block
で、マージンやパディングが機能するはずです。(確認
http://tympanus.net/codrops/css_reference/display/
).
関連
-
[解決済み】ダウンロードしたフォントのデコードに失敗しました。
-
[解決済み】サイドバーの位置を変更する
-
[解決済み] 他のブラウザが画像を読み込むときに、Chromeがエラー **Failed to load resource: net::ERR_NAME_NOT_RESOLVED** を発生させる。
-
[解決済み] Tailwind CSS - コンポーネントとしてのレスポンシブブレークポイント
-
[解決済み] margin: auto は中央揃えではありません。
-
[解決済み] css グリッドによる垂直・水平方向の中央揃え 4x4 正方形グリッド
-
[解決済み] セレクトボックスのテキストを中央揃えにすることは可能ですか?
-
[解決済み] テーブルの行にマージンを追加する方法 <tr> [重複]。
-
[解決済み] CSS 100% height と padding/margin の関係
-
[解決済み] ビューのパディングとマージンの違いについて
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] "セレクタ(CSS)にIDを使うな "なら、IDの代わりに何を使えばいい?
-
[解決済み] SVGの塗りつぶし色が効かない
-
[解決済み] Railsです。railsでcssから背景画像を設定する方法は?
-
[解決済み] FontAwesomeによる星評価用CSS
-
[解決済み] Bootstrapコンテナが複数またはネストされていませんか?
-
[解決済み] Bootstrap 3 で列からパディングを削除する
-
[解決済み] 子 div が親 div からはみ出さないようにする。
-
[解決済み] cssのフォントサイズ14px/26pxってどうなってるの?
-
[解決済み] HTMLとCSSのBackground-imageが表示されない
-
[解決済み] cssでこの要素を取得するには